CODEWITHSUNDEEP
jqueryhtmlcss
user2837485
user2837485

Reputation: 59

how to make a fixed banner so that content flows over it?

all searched every where and tried alot after that i'm to get help from here i have a banner and some divs below it but when i make banner position fixed the below it comes one the back of banner and banner shows over that div ....the div suppose to be right below after that fixed banner don't want to use 'top'property of css and if i use margin-top al content comes down leaving white space on the top

         <div class="header"></div>
         <div class="content">
         <div class="div1"></div>
         <div class="div2"></div>
         <div class="div3"></div>
         </div>

         .header{ width:100%; height:500px; background:#999; position:fixed;}
         .content{ width:100%; margin-top:300px;}
         .div1{ width:100%; height:400px; background:#09F;}
         .div2{ width:100%; height:400px; background:#FC3;}
         .div3{ width:100%; height:400px; background:#F30;}

please help me out

Upvotes: 0

Views: 68

Answers (1)

couzzi
couzzi

Reputation: 6366

Fixed position needs to be told where to go.

Add top:0; and left:0 to your .header class.

 .header {
     width:100%;
     height:500px;
     background:#999;
     position:fixed;
     top: 0;
     left:0;
 }

Demo: http://jsfiddle.net/E8kgr/

P.S. 500px is a pretttttty big header. Just sayin'.

Upvotes: 1

Related Questions