Menu
I stuck with something like below. I need to make right-top div 100% height (its bgcolor will cover full height of main div).
<body>
<div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;">
<div id="left" style="float: left; width: 600px; background-color: #A7C864;">
<div id="left-top">left-top</div>
<div id="left-bottom">left-bottom</div>
</div>
<div id="right" style="float: right; width: 200px; background-color: #C7E48E;">
<div id="right-top">right-top</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
Working example here: http://marioosh.net/lay1.html
Using table it is easy: http://marioosh.net/lay2.html
273
I may be misunderstanding the question (your link to the table-based example isn't working), but it sounds like you're trying to create two columns with equal height. There are several techniques you can use, here are three of them:
You can give each DIV a large bottom padding, and an equally large, but negative, bottom margin.
#main {
overflow: hidden;
}
#left, #right {
float: left;
padding-bottom: 1000em;
margin-bottom: -1000em;
}
This solution is not without it's problems; if you attempt to link to an element in one of the columns (e.g. you have an element in one of the columns with id=foo and you link to mypage.html#foo) then the layout will break. It's also hard to add bottom borders using this technique.
Full example from Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
You can give one of the columns a negative right margin, and the other a very wide left border.
#left, #right {
float: left;
}
#left {
background: red;
width: 200px;
margin-right: -200px;
}
#right {
border-left: 200px solid red;
}
More information on Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
You can fake it by giving #main a background image that includes the background for both columns. This technique is known as “Faux Columns” and is useful when you want complex backgrounds, or a decorative border between the columns.
More information on A List Apart: http://www.alistapart.com/articles/fauxcolumns/
As one commenter on the question noted, you can also use a table. However, unless you're displaying tabular data TABLE is not the appropriate HTML element.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
