Equal height columns with padding
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... :)
This site might help you: http://www.cssplay.co.uk/layouts/threecol.html
His entire site is worth a look for CSS ideas you have never thought of before.
I think he will even do the work for 50 Euro an hour. I have hired him in the past, he was fast.
I think your link is more of an explanation of this one:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
Although this one has more in depth discussion on the caveats and problems concerning the 3 equal height columns.
加载中,请稍侯......
精彩评论