Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS fluid width for a center column

Tags:

css

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

like image 994
Francesco Avatar asked Mar 23 '11 16:03

Francesco


People also ask

How do you create fluid width in CSS?

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.

How do you set fixed width?

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.


1 Answers

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/

like image 96
meo Avatar answered Sep 28 '22 11:09

meo