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

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).