First of all, hello all. This problem is driving me to insanity so I hope for a simple solution
Here is an image of what I wanted originally.
But I didnt want to use hacks to get Box 1 and (Box 2+Box 3) to expand with each other. So I will just use a background color on the wrapper instead so its not noticeable that they have different heights.
This is what I have now:
CSS
#wrapper {
background: #000;
width: 50%;
float: left;
}
#box1 {
background: #FF0012;
width: 65%;
float: left;
}
#box2 {
background: #141;
width: 35%;
margin-left: 65%;
}
#box3 {
background:#AA1232;
width: 35%;
margin-left: 65%;
}
HTML
<body>
<div id="wrapper">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</div>
</body>
If you wonder why I dont use float: right; on Box 2 and 3 its because if Box 1 is lower than Box 2 then Box 3 will float under Box 1 instead of under Box 2.
Problem: 1. Fix Box 3 to the bottom of the wrapper 2. When rows are inserted in Box 3 and Box 2, they shouldn't overflow - expand the wrappers height instead (as it does with the code i posted)
If I use position: absolute; bottom: 0; on Box 3 then it will overflow Box 2 when rows are inserted and Box 3 gets too heigh.
Any ideas of how to solve this?