I have nested divs like this (pseudo code..)
<div0>
<div1></div1>
<div2>fluid width</div2>
<div3></div3>
</div0>
given that div0, div1 and div3 have fixed width, it is possible to give a style to the center div2 so always has fluid width (of course based on div0 main wrapper)?
Use the CSS property max-width to create boundaries for a fluid page. By setting a percentage width and a fixed pixel max-width , the content wrapper will always be relative to the screen size, until it reaches the maximum size, 800px in this example, to keep the content wrapper from extending beyond that.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
how could div 2 possibly have a fluid width if div0 does not. You could set div 2 to position fixed but this would reult in a unusable mess. Anyway I assume it was an error and you want div 0 and 2 to be fluid.
yes it is possible
just set the with of div1 and 3 as padding left and right on the container. And use a negative margin (or left/right value) to set them in the right place.
Float the divs 1 2 and 3 left.
edit
here is an example: http://jsfiddle.net/meo/H2LPJ/1/ well its a little more complicated then my explenation.
Oh and i assume your content is in div2 so it would more semantic to plcae this div first in the content: http://www.alistapart.com/articles/holygrail/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With