tags:

views:

306

answers:

3

You can copy&paste the following markup and css to see the effect.

The problem exists in the "footer" part.

Now "column1" and "column3" are absolutely positioned.

It works only when "column2" is highest.

How to make the "footer" not interleave with column1~column3 under all conditions?

markup:

<body>
<div id="mainwrap">
<div id="header"><p>A fluid-width faux-columns example</p></div>
<div id="contentarea" class="clearfix">
<div id="contentarea2" class="clearfix">

<div id="column2">
<p>This layout uses absolute/relative positioning to position the side columns within
 their respective faux columns containers.</p>
<p>You can control the maximum and minimum widths of the fluid center area.
Once the layout reaches its maximum width, it centers itself in the browser as the window
 gets wider.</p>
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus
    mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse
    consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis
    fermentum purus.</p>
   <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales,
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna.
    Nunc mattis congue leo.</p>
</div><!--end column2-->
<div id="column1">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!--end column1-->
<div id="column3">
<p>This template uses the Alsett clearing method.</p>
</div><!--end column3-->
</div><!--end contentarea2-->
</div><!--end contentarea-->
<div id="footer">This is the footer</div>
</div><!--end mainwrap-->
</body>

css:

body {font: 1.0em verdana, arial, sans-serif;
   text-align:center;
   }
* {margin:0; padding:0;}
div#mainwrap {min-width:780px; max-width:960px;
   margin-left:auto; margin-right:auto;
   text-align:left;
   }
div#header {height:32px; background-color:#CAF; text-align:center;}
div#contentarea { background-color:#FFF;
   background:url(images_pres/faux_left.gif) repeat-y top left;
   position:relative;
   }
div#contentarea2 {background-color:#FFF;
   background:url(images_pres/faux_right.gif) repeat-y top right;
   position:relative;
   }
div#column1 {width:150px;
   position: absolute;
   top:0px; left:0px;
   background-color:#CCC;
   overflow:hidden;
   }

div#column2 {background-color:#FFF;
   margin:0 170px 0 150px;
   }
div#column3 {width:170px;
   position:absolute;
   top:0px; right:0px;
   background-color:#DDD;
   overflow:hidden;
   }
div#footer {background-color:#FAC; text-align:center; padding-top:6px;}

div#column1 ul {margin: 20px 0 0 26px;}
div#column2 p {font-size:.8em; margin:0 30px 1em ;}
div#column3 p {margin: 20px 10px 0 10px;}
A: 

You can´t in just css. When you position your columns that way, they are no longer part of the document flow. Not even clear: both will have any effect.

You could give your centre column a min-height if you know the heights of the side columns or you could use javascript to calculate the largest height. Or you could float the side columns, but that would dictate a certain order of the blocks in the html.

jeroen
A: 

Easy way is to do a float:left on all three center divs, then use

<div style="clear:both;">&nbsp;</div>

There are dozens of examples on the web see 960 Grid System is a great framework for something like this.

You should avoid absolute positioning when possible.

Davin
Column1 and Colum3 is fixed-width,while column2 is flexible.can achieve that Using float ?
Shore
http://www.alistapart.com/articles/holygrail/ has a fantastic tutorial on how to achieve this.
Davin
A: 

You can also consider the Fluid 960 Framework

pegasus4747