CODEWITHSUNDEEP
htmlcssnavigation
clifgray
clifgray

Reputation: 4419

Prevent HTML content from overlapping

I have the following code: http://jsfiddle.net/pefGx/1/ and for some reason the nav area hides content as opposed to just making it go to the next line. What kind of code do I need to put in there to make the words move around it. I have tried putting the ul in a div but to no avail.

Upvotes: 0

Views: 3184

Answers (3)

Ben McCormick
Ben McCormick

Reputation: 25718

As the others said, remove the position absolute. You can then use the margin properties to move it upward if needed. Here's your JS Fiddle with the nav moved 40px upward

http://jsfiddle.net/pefGx/5/

The key line is margin-top in the css.

Upvotes: 0

Senad Meškin
Senad Meškin

Reputation: 13756

All you need is to remove position:absolute; from your nav class. And all will be ok.

This is your updated jsfiddle http://jsfiddle.net/pefGx/4/

Upvotes: 1

Quentin
Quentin

Reputation: 943142

Remove position: absolute;.

Content won't flow around things that are taken out of normal flow (which is what absolute positioning does).

Upvotes: 3

Related Questions