...

View Full Version : CSS Two columns



adman4054
12-15-2006, 12:35 AM
Hi--
Newbie question-- I'm doing my first site entirely in CSS. I have a two column page. The first column has a colored background and consists of just navigation. The second column will contain editorial matter that is sometimes longer than the first column. When the story is longer there is a gap between the bottom of the page and the first column. What syntax or tag can I use at the end of that first column to make it stay the same size as the second one, no matter what the length.

Thanks in advance ans sorry about the newbie question!:)

Excavator
12-15-2006, 12:42 AM
Hello adman4054,
have a look at faux columns (http://alistapart.com/articles/fauxcolumns/)to see how to do that.

adman4054
12-15-2006, 01:02 AM
Hello adman4054,
have a look at faux columns (http://alistapart.com/articles/fauxcolumns/)to see how to do that.

Thanks Excavator!:thumbsup:

Excavator
12-15-2006, 01:58 AM
I have an example that might make it easier. Explains the CSS pretty well...
see it at http://www.nopeople.com/CSS/equal_length_columns/

adman4054
12-15-2006, 09:28 PM
I dont get it. The navigation for my site is below [++vnav++ is from a cms]. It is contained within these two tags. I need this to have the same length as the column next to it [a total of two columns make up the page] How do I get it to do what I need. Its just a colored background, no image.

-------------------------------------------
<div id="leftcol">
<div id="tabledata">
<p align="center">&nbsp;</p>
++VNAV++

</div>
</div>
--------------------------------------------

#tabledata {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
background-color:#999966;
float: left;
position: relative;
width: 125px;
height:auto;
display:block;
color:#0000FF;

#leftcol {
float:left;
margin: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 4px;


Thanks in advance.

Excavator
12-15-2006, 10:30 PM
In that example I posted make the HTML read like this:



<div id=left>

<div id="tabledata">
<p align="center">&nbsp;</p>
++VNAV++
</div>

</div>

And add your CSS inside the style tags:


#tabledata {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
background-color:#999966;
float: left;
width: 125px;
height:auto;
display:block;
color:#0000FF;



I'm sure things will need tweaked to make them look right but that's a start for you.

adman4054
12-15-2006, 10:51 PM
Thanks a million for responding. It didnt work the first time I tried and now my wife and son say I need to take them out to dinner. I'll try it again when I get back. Thanks again!




In that example I posted make the HTML read like this:



<div id=left>

<div id="tabledata">
<p align="center">&nbsp;</p>
++VNAV++
</div>

</div>

And add your CSS inside the style tags:


#tabledata {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
background-color:#999966;
float: left;
width: 125px;
height:auto;
display:block;
color:#0000FF;



I'm sure things will need tweaked to make them look right but that's a start for you.

adman4054
12-16-2006, 01:36 PM
Good Morning--
I appreciate all the help. I'm new to the board, but wont be for long. Very active group willing to help. I have tried the suggestions to no avail. I'm sure Its something I'm doing wrong being so new to css. I have stripped the page of everything except the elements I need to fix and I was hoping someone would take a look at it. The page can be viewed here: http://greatnewspapers.com/gratiot/about/rates.shtml
The column on the left[navigation] needs to extend down to the footer no matter what the size of the column next to it. The page is managed by a cms [the tags with ++xxxxx+++ are widgets within the cms]. The left nav column is populated by the ++VNAV++ widget and the column next to it is populated by the ++CONTENTS++ widget. Here is the page:

++HTMLHEAD++

<body>
<div id="contain">

<div id="headmenu">
</div>

<div id="headmenu1">


</div>


<div id="leftcol">

<div id="tabledata">
<p align="center">&nbsp;</p>
++VNAV++
</div>

</div>

<div id="tabledatamenuright">
<div id="tabledata9">
++CONTENTS++



</div>

</div>








<div id="footer">

</div>





</body></html>

I have also attached the appropriate styles:

#contain {
width:800px;
margin-left:auto;
margin-right:auto;
PADDING-TOP: 12px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;

}
#headmenu {
FONT-SIZE: 14px;
COLOR: #000000;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 5px;
margin-top:0px;
padding-bottom:5px;
height: 18px;
text-decoration:none;
BORDER-RIGHT: medium none; BORDER-TOP: 1px solid; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;
background-color:#cccccc;

}

#headmenu1 {

FONT-SIZE: 14px;
COLOR: #000000;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 5px;
margin-top:0px;
padding-bottom:5px;
height: 18px;
text-decoration:none;
BORDER-RIGHT: medium none; BORDER-BOTTOM: 1px solid; BORDER-LEFT: medium none; BORDER-TOP: medium none;
background-color:#cccccc;

}

#leftcol {
float:left;
margin: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 4px;

}

#tabledata {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
background-color:#999966;
float: left;
position: relative;
width: 125px;
height:auto;
display:block;
color:#0000FF;
}

#tabledatamenuright{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
PADDING-bottom: 0px;
float:left;
width: 665px;
position: relative;
margin-top: 0px;
}


#tabledata9 {
text-align:center;
margin: 0px;
PADDING-RIGHT: 4px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 5px;
vertical-align:top;
position:relative;
float: left;
width: 100;
COLOR: #000000;
background-color: #ffffff;
}











Appreciate the Help!

1212jtraceur
12-16-2006, 02:05 PM
It looks like you're sizing your blocks in px. If you apply 'position: relative;' to div#contain, and position it's children absolutely (specifying 'bottom: 0;' for div#leftcol), it should work. See here (http://www.w3schools.com/css/css_positioning.asp) for more on positioning.

adman4054
12-16-2006, 02:25 PM
I apoligize for being so new. I tried what you said, but it just put the nav bar at the bottom with the same size. In order to stretch the nav bar from top to bottom what do I need to do.
Thanks.

adman4054
12-16-2006, 04:01 PM
All--
Thank you for all the help. I ended up using a piece of javascript to make the columns equal. For anybody else that has the same issue I found the script and instructions for its use here:http://www.killersites.com/blog/2006/matching-div-heigths/

The only down side I can see is that if someone has "java" turned off in their browser, the script wouldnt work.:)

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum