SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container width and fluid - theoretical question

    Hi all,

    i've got a somewhat theoretical question: you have a fluid lay out in percentages, everything nicely wrapped up in a container. Now, if i'm correct, the container being a block element, without any width declared should default to the width of the view port. That way, it should adapt to the users view port. But sometimes i see that peeps set the container to have a width of 100%. And me, myself and i often do the same but does that actually make any sense? I use it to have a starting point so the browsers can calculate the other widths but i was wondering if it is necessary at all.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Specifying width:100% can be necessary if the container is floated or absolutely positioned. In those cases it will otherwise 'shrinkwrap' to fit its content.

    For container elements in the normal flow, an omitted width (and min-width and max-width) declaration means that the computed width depends on the horizontal margins and padding. If those are zero, the result is effectively the same as for width:100%.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It's also possible some sites set the width purely to trigger Haslayout on a main-page container, for whatever reason.

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Specifying width:100% can be necessary if the container is floated or absolutely positioned. In those cases it will otherwise 'shrinkwrap' to fit its content.

    For container elements in the normal flow, an omitted width (and min-width and max-width) declaration means that the computed width depends on the horizontal margins and padding. If those are zero, the result is effectively the same as for width:100%.
    I forgot to mention that i'm talking about a container in the normal flow.
    So my understanding was correct (no padding, no margin, no min/max width), that 100% isn't necessary :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    It's also possible some sites set the width purely to trigger Haslayout on a main-page container, for whatever reason.
    Doesn't sound a good idea to me now, is it? Generally speaking.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes its a very good idea if you want to support ie6 and ie7.

    Any main container that holds more than simple text content or just a few simple elements must have a layout or it will break in unspeakable ways. The problem is that you never really know when it is going to break so I find it's better to be safe than sorry.

    If you have inner floated content or have inner elements that need to be absolute positioned then the parent element must have a layout. Indeed absolute elements are always misplaced if the parent doesn't have layout.

    width:100% is an easy way to induce layout without using hacks but of course does make it awkward if you want padding as well.

    So for main containers and the like using width:100% is good if you want to avoid using the height:1% or zoom hacks for IE.

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes its a very good idea if you want to support ie6 and ie7.

    Any main container that holds more than simple text content or just a few simple elements must have a layout or it will break in unspeakable ways. The problem is that you never really know when it is going to break so I find it's better to be safe than sorry.

    If you have inner floated content or have inner elements that need to be absolute positioned then the parent element must have a layout. Indeed absolute elements are always misplaced if the parent doesn't have layout.

    width:100% is an easy way to induce layout without using hacks but of course does make it awkward if you want padding as well.

    So for main containers and the like using width:100% is good if you want to avoid using the height:1% or zoom hacks for IE.
    k Paul, so what you're basically saying is that using width:100% doesn't hurt and avoids using the traditional hasLayout hacks for IE? So instead of figuring out on what element to apply those hacks, setting it on the container _should_ get you in the clear?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Luki_be View Post
    k Paul, so what you're basically saying is that using width:100% doesn't hurt and avoids using the traditional hasLayout hacks for IE? So instead of figuring out on what element to apply those hacks, setting it on the container _should_ get you in the clear?
    Yes it doesn't hurt as you say but conversely it may also do good

    It does however hurt if you want padding as mentioned and then you could use one of the hacks instead.

    I'm not saying add it to every element but only your main containers or containers that hold more than smple content. Indeed it won't fix all issues but it will help.

    Elements with negative margins and elements that hold floated or absolute content should really have a layout but you wouldn't apply it to normal paragraphs or divs that just hold static text etc.

    The problem with haslayout is that the error may not show up until later on and somewhere far from the original cause.

    It's another choice that you have to make for yourself.

  9. #9
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes it doesn't hurt as you say but conversely it may also do good

    It does however hurt if you want padding as mentioned and then you could use one of the hacks instead.

    I'm not saying add it to every element but only your main containers or containers that hold more than smple content. Indeed it won't fix all issues but it will help.

    Elements with negative margins and elements that hold floated or absolute content should really have a layout but you wouldn't apply it to normal paragraphs or divs that just hold static text etc.

    The problem with haslayout is that the error may not show up until later on and somewhere far from the original cause.

    It's another choice that you have to make for yourself.
    Yeah, but i usually use paddings on the inner element, not on the main container (at least i try to avoid that) :-)

    Yeah, my problem with hasLayout is always to figure out on which element to use it, just because as you say: the problem has the nasty side effect that it turns up where you least expect it :-)

    So, in short: giving my main container a 100% width like i'm used to will keep being my first step (although now for a different reason then i used to do it lol).

    Tnx for the insight Paul :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


Bookmarks

Posting Permissions

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