January 3rd, 2004, 07:30 AM
|
|
Contributing User
|
|
Join Date: Sep 2003
Location: Stratford-upon-Avon, UK
Posts: 66
Time spent in forums: < 1 sec
Reputation Power: 6
|
|
[resolved] Balance height of css columns
Hi
I've been experimenting with doing away with the 3 column table design of my site and replacing it with css containers.
This is the simple html code for the trial page:
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<STYLE type=text/css>#container {
BORDER-RIGHT: gray 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: gray 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
MARGIN: 10px auto;
BORDER-LEFT: gray 1px solid;
WIDTH: 760px;
PADDING-TOP: 10px;
BORDER-BOTTOM: gray 1px solid
}
#banner {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
BACKGROUND-COLOR: rgb(213,219,225)
}
#content {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
MARGIN-LEFT: 215px;
MARGIN-RIGHT: 215px;
PADDING-TOP: 5px;
BACKGROUND-COLOR: gray
}
#sidebar-a {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FLOAT: left;
PADDING-BOTTOM: 5px;
MARGIN: 0px 5px 0px 0px;
WIDTH: 200px;
PADDING-TOP: 5px;
BACKGROUND-COLOR: rgb(235,235,235)
}
#sidebar-b {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FLOAT: right;
PADDING-BOTTOM: 5px;
MARGIN: 0px 0px 0px 5px;
WIDTH: 200px;
PADDING-TOP: 5px;
BACKGROUND-COLOR: rgb(235,235,235)
}
#footer {
CLEAR: both;
PADDING-RIGHT: 5px;
MARGIN-TOP: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
BACKGROUND-COLOR: rgb(213,219,225)
}
</STYLE>
</HEAD>
<BODY>
<DIV id=container>
<DIV id=banner> </DIV>
<DIV id=sidebar-a></DIV>
<DIV id=sidebar-b></DIV>
<DIV id=content> </DIV>
<DIV id=footer> </DIV></DIV></BODY></HTML>
Now, the problem is that if I put some content in the left sidebar (a) it extends down, but the others do not follow. I could make each a fixed height, but the site uses variable content from a database to fill the sidebars, and an overly long height would push the footer way out of sight.
Any thoughts?
Trevor
__________________
"Good artists copy, great artists steal." Pablo Picasso
Last edited by clevatreva : January 4th, 2004 at 04:16 AM.
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
