I've been struggling with this issue for almost three days now. After reading numerous articles on creating a three-column layout and experimenting with absolute and relative positioning, I'm still not able to achieve the desired result.
What I'm looking for is a straightforward layout - a navigation div on the left side, two content divs on the right side, and a footer. If I were using tables, it would look something like this:
<table border="1">
<tr>
<td rowspan="2">
left nav.
</td>
<td>right 1</td>
</tr>
<tr>
<td>right 2</td>
</tr>
<tr>
<td colspan="2">footer</td>
</tr>
However, I am encountering an issue where the left div won't stretch all the way down. The code snippet I have so far seems to work in IE7 but not in Opera or Firefox.
I suspect that the float property is not expanding the length of the parent div, causing the left div to miscalculate its parent's size.
Any assistance on this matter would be greatly appreciated.
<html>
<head>
<style type="text/css">
body {
height:100;
}
.main {
height: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
width: 100%;
}
.leftDiv {
position: relative;
float: left;
width: 18%;
height: 100%;
background-color: aqua;
}
.topRight {
position: relative;
float: right;
width: 80%;
background-color: green;
}
.bottomRight {
position: relative;
float: right;
width: 80%;
background-color: red;
}
.footer {
width: 100%;
float: right;
background: blue;
position: relative;
}
</style>
</head>
<body>
...
...
...
</body>
</html>