Hi,
I am make a site with a 2 column layout where the left column is for the menu (vertically stacked) and the right side has the content.
What I need is the CSS for this 2 column layout such that:
1) Cross browser (FireFox 2 and IE 6)
2) BOTH columns to be at least 500px in height, but if the content in the right column expands beyond that height… .then I want both, yest both columns to expand - not just the right column with the content, but BOTH columns must expand when the content extends over 500px. I want the columns to be/look symmetrical.
3) No ‘faux’ columns please - the left and right columns will have a different background color than the background of the page itself.
I’ve tried a dozen examples from web sites… but NONE of them WORK Here’s where I’m at now:
http://www.alexwenttochina.info/template.php and/or
http://www.alexwenttochina.info/template.html
(I apologize for posting a link - but this is the easiest way to show what I have and what I want)
I am ‘close’..... but I can’t get BOTH columns to expand when the right column, which contains the dynamic content that may expand past the minimum height.
I can’t tell how frustrating this is…..Arrrrggggh (and I’m not even a pirate or anything) - it seems it takes more ‘work-arounds’ to do something in CSS and it doesn’t even really work.
The CSS that controls my column layout for my http://www.alexwenttochina.info/template.html is:
body{
background: #32331c;
}
#left {
margin-left: 5px;
width: 200px;
background: #a2c4ca;
}
#right {
width: 600px;
background:#cae688;
color: black;
}
.col {
float: left;
min-height: 500px;
height: auto !important;
height: 500px;
}
.clear {
clear: both;
}
#footer{ /*not used */
margin-left: 40px;
text-align: center;
border-bottom: thin solid #99CC33;
}
The CSS that controls my column layout for my http://www.alexwenttochina.info/template.php is:
body{
background: #32331c;
}
#wrapper
{
width: 790px;
margin: 0 auto;
height: 100%;
}
#left
{
width: 220px;
float: left;
height: 500px;
background: #a2c4ca;
background-image: url(../images/peace.gif);
}
.left-container
{
margin: 10px;
margin-bottom: 0; /* IE6 pushes footer down without this */
}
#right
{
width: 680px;
background:#cae688;
float: left;
height: 500px;
}
.right-container
{
margin: 20px;
margin-bottom: 0; /* IE6 pushes footer down without this */
}
.clear
{
clear: left;
}
I do understand a little CSS, but not much. So any help would be GREATLY appreciated!! I mean if you really know who to make a 2 column layout where BOTH columns have a minimum height, and BOTH columns will expand when the right column extends past this minimum…..PLEASE help!!!
Thanks
Vmusic
