Question

I have many divs in my css file. Now I have a proper layout showing in my html page but there is a serious problem which is: if I am displaying information in the center div, it only shows part of it while the other information is covered by the header.

That means center div is not starting after header, but rather with header hence data is displayed behind the header. Behind is the code for both of them.

#header{ 
/*background-color: #3B5998;*/
 background-image:-moz-linear-gradient(center bottom , #ebebeb, #999999);
    background: #F6F6F6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999999), to(#ebebeb));  
height:60px;
position:fixed;
left:0;
width:100%;
}



#center { 
margin-right:200px;
background-color:white; 
min-height:700px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:700px; /* for IE5.x and IE6 */
color:black;

}

Is there anything missing here that would lead to this problem? An image is attached to this post showing how only the image showing and not text above it. if I add 3
it shows the text.

Answer 1

Add margin-top: 60px; to the center div.

#center { 
margin-right:200px;
margin-top: 60px;
background-color:white; 
min-height:700px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:700px; /* for IE5.x and IE6 */
color:black;

}

Because your header is position: fixed; it has been taken out of the document flow, therefore any elements will appear under it, unless given the instruction to move down.

The trick is to have the margin-top the same height as the header element.