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