Hey. I have the following markup:
<!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>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
#container
{
padding-left: 200px;
padding-right: 10px;
overflow: hidden;
}
.column
{
float: left;
position: relative;
text-align: justify;
margin-bottom: -2000px;
padding-bottom: 2005px;
}
#top
{
background-color: Red;
height: 30px;
}
#content
{
background-color: Green;
width: 100%;
padding: 0 5px;
}
#left
{
background-color: Blue;
width: 200px;
right: 210px;
margin-top: -30px;
margin-left: -100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
Lorem ipsum blah blah blah
</div>
<div id="content" class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
</div>
<div id="left" class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
</div>
</div>
</body>
</html>
The problem is, that the left column doesn't show up. However, if I remove the padding from #content (and subtract 10 from #left's right value), it works, except for the missing padding on #content. Is there any way to fix this without any extra markup? I've seen this solution:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
But I would like to keep the amount of wrappers to a minimum... :)