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.
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
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?
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).
