www.webdeveloper.com
Results 1 to 12 of 12

Thread: Dynamic Page Layouts

  1. #1
    Join Date
    Nov 2008
    Location
    Wiltshire, England
    Posts
    108

    Dynamic Page Layouts

    Usually I use divs pretty much exclusively when laying out pages just because I prefer to do things that way. This is perfect on a static page but I was wondering about when you have a dynamic page let me give an example.

    Lets say you have a news section that can be changed through a content management system and added. Divs have to have a width and height, the width might be easy but you won't know how much height to put into the div because you don't know how much news text will be there. Also it's harder to position another one underneath is using a class when more are added.

    So I was wondering with situations like this do you have to use a table or will divs still work somehow?

  2. #2
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    the key is not to let your design become trapped in a layout that is "x pixels by y pixels" so that you can fluidly adjust your page, usually vertically but sometimes horizontally, depending on the content provided.

    Divs have to have a width and height is a misleading statement. In their simplest form, a div left to it's own devices will be bound to the dimensions of it's contents, always defaulting to the minimum requirements.

    An un-styled div around a 100x100px image will default to 100px by 100px.

    if you add a 10px margin to the image, then the div will re-size to 120px by 120px (10px each; top, right, bottom and left).

    Once you get to resizing and positioning beyond the default, then you will start needing the requirements of width and/or height.

    It might be easier to plan your "unknown" design into columns of a defined width, so that your content has room to grown down the page, taking at least one complication out of the design.

  3. #3
    Join Date
    Jun 2010
    Posts
    65
    Divs are scalable, in other words... If you don't set a hight and just set a width, it will grow to the size of content and push everything underneath further down.
    Maybe you need to experiment with this before you start putting news content in there?

    Just set a minheight
    http://www.w3schools.com/CSS/pr_dim_min-height.asp

  4. #4
    Join Date
    Mar 2010
    Posts
    672
    Quote Originally Posted by jason87 View Post
    Divs are scalable, in other words... If you don't set a hight and just set a width, it will grow to the size of content and push everything underneath further down.
    Maybe you need to experiment with this before you start putting news content in there?

    Just set a minheight
    http://www.w3schools.com/CSS/pr_dim_min-height.asp
    A quick note, but recently i found out that the latest version of google chrome had, ironically enough, interpreted my min-height css as the div's "max height", so to speak. It actually prevented the div from expanding past the value set until i removed that line. Though, i didn't really bother to see if it was a combination of min-height and other css that caused this, but something to keep in mind.

  5. #5
    Join Date
    Jun 2010
    Posts
    65
    Quote Originally Posted by Jarrod1937 View Post
    A quick note, but recently i found out that the latest version of google chrome had, ironically enough, interpreted my min-height css as the div's "max height", so to speak. It actually prevented the div from expanding past the value set until i removed that line. Though, i didn't really bother to see if it was a combination of min-height and other css that caused this, but something to keep in mind.
    sounds like a bug, or something conflicting there

  6. #6
    Join Date
    Nov 2008
    Location
    Wiltshire, England
    Posts
    108
    Thanks for the replies, I guess I thought wrongly about how divs work compared to tables. I thought that you always had to specify the exact dimensions of each div.

    For positioning say boxes underneath can I assume that relative positioning could be used? So if the site is styled so that each small block of content is positioned in boxes one above the other that you can just specify a top, left and width and position is relatively?

  7. #7
    Join Date
    Mar 2010
    Posts
    672
    Here is an excellent visual tutorial on positioning div's with css:
    http://www.barelyfitz.com/screencast...s/positioning/

  8. #8
    Join Date
    Mar 2010
    Posts
    672
    Quote Originally Posted by jason87 View Post
    sounds like a bug, or something conflicting there
    Oh yes, it most definitely is a bug. I was just throwing it out there to watch out for it until its fixed. If the original poster was using chrome, and experimenting with min-height, i didn't want him to think he was doing something wrong.

  9. #9
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,330
    Quote Originally Posted by Steve25 View Post
    Thanks for the replies, I guess I thought wrongly about how divs work compared to tables. I thought that you always had to specify the exact dimensions of each div.
    Practically speaking, a <div> is no different than a <p>, other than the <div> has a less precise semantic meaning.

    For positioning say boxes underneath can I assume that relative positioning could be used? So if the site is styled so that each small block of content is positioned in boxes one above the other that you can just specify a top, left and width and position is relatively?
    You'll probably find yourself creating and positioning "column" divs, and then populating them with one or more "content" divs, which will automatically stack under each other within that column.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  10. #10
    Join Date
    Nov 2008
    Location
    Wiltshire, England
    Posts
    108
    Thank you all for the replies, very helpful

  11. #11
    Join Date
    Jan 2006
    Location
    MN
    Posts
    440
    You don't necessarily have to position divs either. They are inline elements, one div will automatically stack on top of the next without dimensions or positioning.

  12. #12
    Join Date
    Jun 2010
    Posts
    65
    @Dasher

    I'm sure divs are block elements and spans are inline elements.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles