html - trying to get equal height columns but div after the columns does not work

Question

Example page I'm working on

I used technique mentioned on this page:

Basically I have a container and inside the container I have col1 and col2. I want col1 and col2 to be same height.

this all works fine soon as I change:

<div id="container1">
    <div id="col1"> column1</div>
    <div id="col3"> Column3</div>
</div>

to

<div id="container1">
    <div id="col1"> <div class="announcement-heading"/>column1</div></div>
    <div id="col3"> <div class="announcement-heading">Column 3</div></div>
</div>

When I do this, it starts to overlap on my footer. What can I do to fix this??

Answer 1

A couple of things:

First of all, you're not really applying the equal height columns there are you? There's no trace of that technique anywhere in those columns. Anyway, easiest and cleanest method for clearing floated elements is to drop a overflow: hidden onto the container #container1. Other methods include adding in a clearfix element after/inside the container, as suggested by sscirrus, or adding in a clear: both to the footer will also work, but are slightly less desirable as they introduce new markup elements.

Secondly, your footer is a mess. The .footer-text element has an explicit width set on it, so that the gray area is seen stretching across the whole of the footer. Except that because floats are fragile, and text-rendering varies from browser to browser, here the text is 1px too big and breaks the float. What you should do is something like this:

HTML:

<div id="footer-content">
    <p class="footer-text">Cloud Nine Technologies, Inc.</p>
    <p class="footer-text-right">703-869-9051 | 1395 Sawteeth Way, Centerville, VA - 20121</p>
</div>

CSS:

#footer-content {
    color: #333;
    overflow: hidden;
    background-color: #ddd;
}

.footer-content {
    float: right;
} 

.footer-content-right {
    float: left;
}