CODEWITHSUNDEEP
htmlcss
tgogos
tgogos

Reputation: 25270

Prevent content from hiding behind fixed position navigation bar

I have a navigation bar with 40px height and I can't place my other content (just a textarea) below this bar. I tried to set margin-top:40px; to the textarea but it doesn' t work.

Then I used padding-top:40px which is ok for the content inside the textarea but as you will see has a problem with the scrollbar (it gets behind the bar).

Just take a look at this jsFiddle

Upvotes: 0

Views: 3966

Answers (3)

Andrew Ice
Andrew Ice

Reputation: 841

Add padding-bottom: 40px to the nav, and remove it from the text-area.

Upvotes: 4

Paulie_D
Paulie_D

Reputation: 115383

As an alternative to @Andrw Ice's answer

You just have to give the textareas margin something to push against.

JSfiddle Demo

This is common...as the advantage is that it doesn't cause any of the elements to moveif the navbar is hidden.

body {
    border:1px solid transparent;
}

nav + textarea{
    margin-top: 40px;
}

Upvotes: 1

vico
vico

Reputation: 2142

use 

postion:fixed;
and margin to push contents out

http://jsfiddle.net/4Y63u/3/

Upvotes: 1

Related Questions