Issue with 3 column fluid layout

HTML & CSS
1

Hi

I am having an issue with a 3 column layout. In the central column I have a title with a background color. It uses a style called areaTitle. I want the background colour to expand all the way along the central column without having to set a fixed size on the background colour. If there is text on the central column then the background colour on the title does expand all the way across the central column but if you only have something like a link on the central column then you cannot get it to expand all the way across. The bigger volume of text seems to push the background colour across.

I am using IE7.

The styles are below:

.areaTitle { background-color: #003366;}

.ccol {margin: 0; padding:0 1em 0 1em; float:left}

.rcol {float: right; width: 16em; }

.lcol {width:16em; background-color:#00FF00; float:left;}

HTML below

<div class="lcol">
 ...
</div>
<div class="rcol">
 ...
</div>
 
<div class="ccol">
       <div class="areaTitle">
          <h1>Title example</h1>
       </div>
 
<ul>
  <li><a href="http://www.csscreator.com">Css creator</a></li>
</ul>
 
 
</div>

ccol is the central column and rcol being the right and lcol being the left.

I hope this makes sense. I am still a beginner at CSS and any help would be great.

Thanks

Rob

2

HI Rayzur

Thanks very much for getting back to me and thank you for the examples. I will try those out tomorrow and will let you know how I get on.

Thanks

Rob

3

If neither of those are a concern to you then you can do what you are wanting by not floating the central column and using the overflow property to keep it from sliding under the floated sidebars.
Here is a simple way to approach your layout without the content first or equal height columns techniques.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Layout</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100&#37;/1.4 arial,helvetica,sans-serif;
    background:#BBB;
}
#wrap {
    width:85%;
    margin:0 auto;
    background:#FFF;
    overflow:hidden;/*contain child floats*/
}
.lcol {
    float:left;
    width:16em;
    background:#0F0;
}
.rcol {
    float:right;
    width:16em;
    background:#FF0;
}
.ccol {
    overflow:hidden;/*stop .ccol from sliding under floated sidebars (IE7 haslayout)*/
    background:#CDF;
}
* html .ccol {display:inline-block;} /*IE6 haslayout*/

h1.areaTitle {
    margin:0;
    font-size:1.5em;
    text-align:center;
    color:#FFF;
    background: #003366;
}
p {margin:1em;}
</style>

</head>
<body>

<div id="wrap">
    <div class="lcol">
        <p>Left column text</p>
        <p>Left column text</p>
        <p>Left column text</p>
    </div>
    <div class="rcol">
        <p>Right column text</p>
        <p>Right column text</p>
        <p>Right column text</p>
    </div>
    <div class="ccol">
        <h1 class="areaTitle">Title example</h1>
        <p>Central column text</p>
        <p>Central column text</p>
        <p>Central column text</p>
        <ul>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?f=53">SitePoint CSS Forum</a></li>
        </ul>
    </div>
</div>

</body>
</html>
4

If there is text on the central column then the background colour on the title does expand all the way across the central column but if you only have something like a link on the central column then you cannot get it to expand all the way across.
Hi Rob,
That is because you do not have a width set on your central column. From the looks of your code you are wanting a fluid width central column and that can be done. It will need an inner wrapping div with margins set on the left and right to make room for the sidebars.

Then you can set 100% width on the middle column to prevent it from shrinkwrapping and shift the sidebars into the margin gutters with negative margins.

Something like this should get you pointed in the right direction.
It also brings the central column first in the source order as far as the columns go.

That example complicates things a little bit because it makes equal height columns and brings the main content first.

If neither of those are a concern to you then you can do what you are wanting by not floating the central column and using the overflow property to keep it from sliding under the floated sidebars.