Making two float divs the same height

Get Started
1

I’ve got two divs floating around inside a container div. The problem is that they should be the same height. I can’t just put a fixed height in CSS, as their size depend on which page you visit, and scrollbars are out of the question. Does anybody here know how to do this?

2

You’re going to have to either…

  1. give them both the same fixed on height on each page (and make a different style sheet for each page or whatever you have done)

or

  1. fill them both with the same amount of content and manage to get them both to be the same size with a relative height
3

Actually there’s another way around it. You’ll have to use my equal height image free column technique, but it can be done.

4

Another way is using nested div layout. Set background-color at its parent divs.

5

Yupp, use the technique that uringgogo is talking about.
Your markup should look something like this in that case…


<div class="wrapper">
    <div class="leftColumn">
        Content here...
    </div>
    <div class="rightColumn">
        Content here...
    </div>
</div>

Then add the styling to .wrapper

Hope this helps… :slight_smile:

6

Alternatively if you don’t need to support IE7 and earlier you could use display:table-cell instead of floats.

7

Nested DIV structure for 2 column has 2 parent wrappers - colmask, colleft

<div class=“colmask”>
<div class=“colleft”>
<div class=“col1”>
<h4>Right</h4>
<p>we wew rere </p>
<p>we wew rere </p>
<p>we wew rere </p>
<p>we wew rere </p>
<p>we wew rere </p>
<p>we wew rere </p>
</div>
<div class=“col2”>
left
</div>
</div>
</div>

CSS

.colmask{
position: relative;
float: left;
overflow: hidden;
background: #6699cc;
width: 71%;
left: 14.5%
}
.colleft{
position: relative;
float: left;
width: 100%;
background: #b4d2f7;
right: 56%
}
.col1{
position: relative;
float: left;
width: 54%;
left: 101%
}
.col2{
position: relative;
float: left;
width: 42%;
left: 3%
}

This method does need some calculation.