Hi all,

I have a 3 column design and would like to have equal columns for my right and left column as they are both navigational. Each column has their own background colour, so if the column height is different for all then it would look a bit weird.

However, i have a footer and would like to have the 3 columns to stop until the footer as the footer is having another background colour. Any idea how i can start?

http://www.alistapart.com/articles/fauxcolumns/
http://matthewjamestaylor.com/blog/e...r-css-no-hacks
http://www.dynamicdrive.com/style/bl...height-script/
http://www.alistapart.com/articles/holygrail/
http://www.candsdesign.co.uk/article...eight-columns/

I have been trying and following the instructions on the links provided, but somehow something is not quite right. I tried to add the height:100% and use the javascript like in some of the examples, but just not quite getting it. Maybe i could get some advice? Below is a snippet of my html file trying to implement my CSS file (which is quite long and i will simplify the example).

By the way, in the FluidDesignWrapper i am trying to make my website have a fluid layout until 1050. And would like to set the PageWrapper to be 90% perhaps so that it fits any browser of what sizes. Thank you in advance!

HTML Page

<div id="FluidDesignWrapper">
<div id="PageWrapper">

    <div id="Header">
      <div class="Liner">

        <div class="ExtraNav">
          Extra Nav at header
        </div>

      </div><!-- end Liner -->
    </div><!-- end Header -->

    <div id="ContentWrapper">
      <div id="ContentColumn">
        <div class="Liner">
Main Content goes here

</div> <!-- end Liner -->
      </div> <!-- end CenterColumn -->
    </div> <!-- end ContentWrapper -->

<div id="NavColumn">
      <div class="Liner">
Left Column
<ul>
            <li><a href="#6">Left ColumnNavigation Link 1</a></li>
            <li><a href="#7">Navigation Link 2</a></li>
            <li><a href="http://www.sitesell.com/">Navigation Link 3</a></li>
            <li><a href="#8">Navigation Link 4</a></li>
            <li><a href="#9">Navigation Link 5</a></li>
          </ul>

</div> <!-- end Liner -->
    </div> <!-- end NavColumn -->

    <div id="ExtraColumn">
      <div class="Liner">
Right Column
</div><!-- end Liner-->
    </div><!-- end ExtraColumn -->

<div id="Footer">
      <div class="Liner">

        <div class="ExtraNav">
          <ul>
            <li><a href="#15"><strong>Anguilla Blog</strong></a></li>
            <li><a href="#16">About Me</a></li>
            <li><a href="#17">Contact Page</a></li>
            <li><a href="#18">Privacy Statement</a></li>
            <li><a href="#19"><strong>Anguilla e-Zine</strong></a></li>
          </ul>
        </div>

        <p>
          Footer with some extra nav below
        </p>

      </div><!-- end Liner -->
    </div><!-- end Footer -->
</div> <!-- end PageWrapper -->
</div> <!-- end FluidDesignWrapper -->

CSS Stylesheet

#FluidDesignWrapper{
width:expression(document.body.clientWidth> 1051? "1050px":"auto");
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background:transparent;
}#PageWrapper {
width: 960px;
border: 2px solid #000000;   /* dark sea blue, headlines and borders */
}#Header {
position: relative;
height: 120px;
}#ContentWrapper {
float: left;
width: 100%;
}#ContentColumn {
margin: 0 180px 0 180px;    /* STEP 1: set to "0 ExtraColumnWidth 0 NavColumnWidth" */
}#NavColumn {
float: left;
width: 179px;               /* STEP 2: to set left column at 180, set 1 less than 180 here */
margin-left: -960px;        /* STEP 3: set to the same width specified in #PageWrapper above (but with minus sign)  */
}#ExtraColumn {
float: left;
width: 180px;               /* STEP 4: to set right columns at 180, set 1 less than 180 here */
margin-left: -180px;        /* STEP 5: set to -(ExtraColumnWidth) */
}#Footer {
clear: both;
width: 100%;
padding: 8px 0;
border-top: 1px solid #000000;
}.Liner {
padding: 10px;
}#Header .Liner {
padding: 0;
}#Footer .Liner {
margin: 0;
padding: 0;
}/* ------ Section 3 - Page Structure Details ------ */#PageWrapper {
margin: 24px auto;
background-repeat: repeat-y;
}#Header {
background-image: url(../image-files/logo.gif);
background-repeat: no-repeat;
background-color: #ffffff;
background-position: top left;
}#ContentWrapper {
background-repeat: repeat-y;
background-color: transparent;
}#NavColumn {
background-repeat: repeat-y;
background-color: #000000;
}#ContentColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
}#ExtraColumn {
background-image: url();
background-repeat: no-repeat;
background-color: #6d6d6c;
}#Footer {
background-image: url();
background-repeat: no-repeat;
background-color: #949200;     /* blue-gray used in left and right columns of background.gif and for footer and horizontal text-navbar */
text-align: center;
font-size: 85%;
}#NavColumn {
font-size: 90%;
color: white;
}#ExtraColumn {
font-size: 90%;
}#NavColumn h4 {
font-size: 90%;
color: white;
margin-top: 0;
}#ExtraColumn h4 {
font-size: 90%;
color: white;
margin-top: 0;
}
.Navigation {
width: 100%;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
background-color: transparent;
}/* -- Nav Headers -- */.Navigation h3 {
padding: 0;
font-size: 110%;
color: #fff;
border-bottom: 1px solid #fff;
margin: 12px 0;
}/* -- Nav List -- */.Navigation ul {
list-style-type: none;
padding: 0 0 8px 5px;
margin: -6px 0 0 0;
}.Navigation li {
background-color: #ffc;        /* tan, for button and RSS box backgrounds -- */
border: 1px solid #8f8fb3;
margin-bottom: 3px;
}/* -- Navigation Link styles -- */.Navigation a:link {
color: blue;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
text-decoration: none;
}.Navigation a:visited {
color: purple;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
text-decoration: none;
}.Navigation a:hover {
color: white;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
background-color: #9d2109;   /* light sea blue used in center column of background.gif and for lit buttons both navbars and AdSenseBox bg color */
text-decoration: underline;
}.
/* ------ Section 5 - Additional Navigation ------ *//* -- Thumbnail-with-Caption Navigation -- */.ThumbnailLink {
text-align: center;
}.ThumbnailLink a:link {
text-decoration: none;
}.ThumbnailLink a:hover .Caption {
text-decoration: underline;
color: red;
}
/* -- Upper Horizontal Text NavBar -- */.ExtraNav {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
}.ExtraNav ul {
list-style-type: none;
padding: 0;
}.ExtraNav ul li {
display: inline;
background-color: #ffc;
text-align: center;
}.ExtraNav a:link {
color: blue;
text-decoration: none;
text-align: center;
padding: 0 4px;
}.ExtraNav a:visited {
color: purple;
text-decoration: none;
}.ExtraNav a:hover {
color: white;
background-color: #9d2109;
text-decoration: underline;
}#Header .ExtraNav {
font-size: 85%;
position: absolute;
top: 0;
right: 0;
}#Header .ExtraNav ul { 
margin: 0;
}#Footer .ExtraNav {
margin: 12px auto;
background-color: #949200;
}