Question

I have 2 div’s that need to stay side by side. For this I placed the first one absolut and just added a margin-left to the second one. This works.
But I have the problem that both can have different hights and the element below always needs to be below the highest one.

<div id="header">
    The header
</div>
<div id="contents">
    <div class="sidebar">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </div>
    <div class="body">
        <p>Some content</p>
    </div>
</div>
<div id="footer">
   The footer
</div>

​
This is the whole code in fiddler:

http://jsfiddle.net/qPtXL/17/

How can I solve that without Javascript? And adding a margin-top to the footer didn’t work either, cause I don’t know how high the contents are.

Answer 1

jsFiddle example

html:

<div id="header">
    The header
</div>
<div id="contents">
    <div class="sidebar">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </div>
    <div class="body">
        <p>Some content</p>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">
   The footer
</div>

css:

#header {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
}

#contents .sidebar {
    width: 120px;
    float: left;
    background-color: gray;
}

#contents .body {
    margin-left: 120px;
    border: 1px solid green;
}

#footer {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
}

.clear { clear: both; }