Forum Moderators: not2easy
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css"
href="css.css" />
</head>
<body>
<div id="wrap">
<div id="head">
<h1>Header</h1>
</div>
<div id="menu">menu 1 - menu 2 - menu 3 - menu 4 - menu 5 - menu 6</div>
<div id="lcolwrap">
<div id="lcol">
<h2>Heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div id="rcol">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</div>
<div id="foot">
©
</div>
</div>
</body>
</html>
CSS:
#wrap{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
}
#head{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#menu{
border-bottom: 1px solid gray;
}
#lcolwrap{
float: left;
width: 100%;
}
#lcol{
margin: 0px 210px 0px 0px;
padding: .5em;
background: red;
}
#rcol{
float: left;
width: 200px;
background: yellow;
margin-left: -201px;
margin-top: 15px;
border-left: 1px solid gray;
}
#foot{
clear: both;
background: blue;
margin: 0;
padding: .1em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
text-align: center;
}
When the content (left) div is the largest / heighest because it has most content, I want the navigation (right) div to stretch along. Off course it should work the other way around too.
I've searched the web for a solution, but have not found it yet. Any help would be appreciated! I'd prefer pure CSS, but if that's not possible a javascript fix would also be welcome.
Thanks in advance!
For example, if you want your right column to be 500px wide in red and the left column to be 200px wide in yellow, design a 700px wide image with 500px in red (from the right) and the rest in yellow (lovely color combination). Slice it down to 1px in height and there's your bg image. Now, no matter which column is taller, it appears that the other stretches along with it.
I love simple, but ingenious solutions, although I can't take credit for this one :-)
A Google search for faux columns will yield many results if you want to investigate further.
Does anybody know a hack that really makes the divs stretch?
The 'faux columns' method sgietz refers to will work for a liquid layout. If you position your background image to a percentage of your main container then it should move left and right at the same rate as your columns grow and shrink. This is probably the 'cleanest' fix currently possible in CSS.
The real cleanest fix would be display:table-cell but as IE lacks support that's probably not currently viable.
But what if your layout is fluid, like mine?
One of us--quite possibly me--is not understanding something properly here. Your layout is not fully fluid as the right column's width is fixed. This means you can add a vertically repeating background image to #wrap like this (assume the image is ~200px wide):
#wrap { background:transparent url(rCol.gif) repeat-y 100% 0; }This will place the background image at the extreme right of #wrap and should do the trick (again, unless I've misunderstood something fairly important about what you're asking--I've used this method many times).
Even if this were a fully fluid layout, you'd have a good chance for success simply by giving #lCol and #wrap different background colors--provided that you could rely on one column's content to be consistently longer than the other.
-b
