Question

I have a problem with my layout. I have a content div that I want to expand the more text there is in it. And at the bottom there’s a div that should hold some contact info.

My problem: I can’t figure out how to allow the content div to become larger without overlapping with my bottom div. I’ve tried margins and paddings but I can’t seen get it to work.

Any kind of help is appreciated.

I pasted the code on Pastebin so this post wouldn’t be so long. A fiddle: http://jsfiddle.net/NpY66/

CSS: http://pastebin.com/7ztPs253
HTML: http://pastebin.com/YBqJJs3g

Answer 1

The answer is, you need to use clear: both; on your footer style.

#bottom{
    border: 1px solid gray;
    font: 12px Helvetica, sans-serif;
    padding: 5px;
    background: white;
    text-align: center;
    clear: both;
}

This will prevent floating div tags from overlapping.

Updated version of your JS Fiddle