CODEWITHSUNDEEP
htmlcss
samwick
samwick

Reputation: 167

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

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??

Upvotes: 0

Views: 164

Answers (2)

Yi Jiang
Yi Jiang

Reputation: 50095

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;
}

Upvotes: 1

sscirrus
sscirrus

Reputation: 56709

You can add a clearing div inside container1 to ensure it fully encapsulates col1 and col2, then if your footer is a simple div you can add a margin or padding to container 1 to ensure your footer is clear. Here's the code you'd use:

<div id="container1" style="padding-bottom:20px;">
    <div id="col1"> <div class="announcement-heading"/>column1</div></div>
    <div id="col3"> <div class="announcement-heading">Column 3</div></div>
    <div style="clear:both;"></div>
</div>

The bottom padding is optional and depends on what technique you are using for your footer, such as if you are using a Sticky Footer (cssstickyfooter.com).

Upvotes: 0

Related Questions