CODEWITHSUNDEEP
htmlcss
DoobyScooby
DoobyScooby

Reputation: 377

HTML/CSS Beginner - positioning of divs

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

Upvotes: 1

Views: 108

Answers (1)

Fenton
Fenton

Reputation: 251062

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

Upvotes: 2

Related Questions