CSS Equal Size Columns

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.

I have been trying and following the instructions from links:
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/

But somehow something is not quite right. I tried to add the height:100% and use the javascript like in one of the links above, 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, below is a simplified example of my original html file).

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. Any help at all would be greatly appreciated as i have been asking around in quite a few forums and no one have been able to assist me yet. Thanks 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;
}

this is not the way you should manage you css.

what is the need of creating 3 different styles for same id (#ExtraColumn) at different place in your css.

i was not able to find from where background color of your column is coming.

you can merge them in one.


#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) */
background-color:#FF0000
}

#ExtraColumn {
background-image: url();
background-repeat: no-repeat;
background-color: #6d6d6c;
}

#ExtraColumn {
font-size: 90%;
}


vineet

Vineet:
I am just a beginner in CSS and i followed a template from this website to use it as a stepping stone: http://sbitips.sitesell.com/iDesign3-1.zip. I think the reason for separating out is to let beginners know what section is for global page and page structure. But that is just my assumption though.

Anyway, I guess it is possible to merge. Previously, in the original CSS from the zip file provided above, they placed a background gif at #PageWrapper. I took it out because if i changed the width in #PageWrapper to say 90%, then the background gif would be quite distorted. The original would be like below for the #PageWrapper.


/* ------ Section 1 - Global Body, Font and Link Settings ------ */
#PageWrapper {
width: 960px;
border: 2px solid #000000; /* dark sea blue, headlines and borders */
}

/* ------ Section 3 - Page Structure Details ------ */
#PageWrapper {
margin: 24px auto;
background-repeat: repeat-y;
background-image: url(../image-files/background.gif);
}


I am not quite sure how or where to place the background colours, but the background colours of the two columns below. The columns are in the respective background colours but up until their sizes which vary. So i need to know how to make their size stretch until the footer even if the content is not as much.

Left Column:

#NavColumn {
background-repeat: repeat-y;
background-color: #000000;
}


Right Column:

#ExtraColumn {
background-image: url();
background-repeat: no-repeat;
background-color: #6d6d6c;


Hope i made sense and thanks for your help in advance.

insert the background image in pagewrapper, it will make your column equal height.

create a 3 coloumn combined background image in 2px height and width of 960px because your wrapper is 960px;


#PageWrapper {
width: 960px;
border: 2px solid #000000;
background-image: url(../image-files/background.gif);
background-repeat: repeat-y;
}


vineet

Vineet:

The code you provided me is the original code from the template CSS i downloaded. But if i have a 90% width for #PageWrapper, then the background.gif won't work so well like below because it has to have a fixed size. If i change the width to 90% for #PageWrapper then the effect is as below:


#PageWrapper {
width: 90%;
border: 2px solid #000000;
background-image: url(../image-files/background.gif);
background-repeat: repeat-y;
}


http://img138.imageshack.us/img138/5496/screenshot1y.jpg

I am trying to follow the fluid design for non-fixed width divs using the following FluidDesignWrapper to engulf all the other divs tag used to allow a maximum width size of 1050px. So that means that even if your resolution is bigger than 1050px, 1050px will be the biggest it'll go:


#FluidDesignWrapper{
width:expression(document.body.clientWidth> 1051? "1050px":"auto");
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background:transparent;
}


Is there any workaround for me to have equal sizes columns without the background.gif used in the #PageWrapper for width 90%. Thanks

background images dont stretch acording to resolution.

secondly what i see in the image attached is that your content is moving towards right.

can you show a online page link.

also before sending online link, merge all common styles classes.

vineet

For the content column, i am using the following ids in the code box below. ContentWrapper is set to 100%. Since the both left and right columns are set to 180px per column, how should i determine the width of the content column if i am setting 90% width for the #PageWrapper. The remaining px left after reducing 180px on both sides, how should i assign that value to #ContentWrapper?

The background.gif that i am using is set at 960px with 2 shades of colour, similar to the screenshot i showed above. So if i change the width to 90% for PageWrapper, then you can see the misalignment.


#ContentWrapper {
float: left;
width: 100%;
}#ContentColumn {
margin: 0 180px 0 180px; /* STEP 1: set to "0 ExtraColumnWidth 0 NavColumnWidth" */
}


I have not uploaded the file yet, would you need me to upload it to let you see?

you have downloaded a very confusing layout.

according to page viewed in browser (what your code outputs) you have left column before content column.

but according to your code, you have left column after your content column.




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


vineet

Vineet:

Although, the NavColumn is placed after the content column, i think it is because of the margin that made the left column be placed in front of the content column even though the code says differently.


#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) */
}