• Locked
4 replies [Last post]
Fri, 2009-07-03 07:21
mol
mol's picture
User offline. Last seen 2 years 30 weeks ago. Offline
rank Regular
Regular
Joined: 2007-08-23
Posts: 20
Points: 0

Hi, need ur help..

I make a layout, consist of wrapper box, top box and content box. Top box and content box inside wrapper box.Wrapper is the outer box.Between top box and content box no distance so I set margin-top:0 in #content.Strangely, top and content is overlapping.Content box up some pixel into top box.I attach the image (in Image I align diferently between top and content to see overlapping).

Anything wrong with my CSS ?, please ur help

Here is the HTML code: 

<body>
 
<div id="wrap">
   <div id="top"></div>
   <div id="content"></div>
</div>
 
</body>

Here is the CSS code: 

#wrap{
position:relative;
margin:0 auto;
padding:0;
margin-top:18px;
width:850px;
height:540px;
background-color:#FFF;
}
 
#top{
position:relative;
padding:0;
top:6px;
height:68px;
width:840px;
background-color:#000000;
}
#content{
margin-left:5px;
margin-top:0;
height:370px;
width:840px;
background-color: #006699;
}

AttachmentSize
layout.jpg5.49 KB
Top
Tags:
Fri, 2009-07-03 07:41
#1
Vade
Vade's picture
User offline. Last seen 1 year 9 weeks ago. Offline
rank Enthusiast
Enthusiast
Joined: 2007-08-13
Posts: 315
Points: 276

Remove position:relative;

Remove position:relative; top:6px; from your #top.

You're effectively telling it to occupy its normal space but appear 6px below that point, thats why its over lapping.

Top
Fri, 2009-07-03 14:12
#2
mol
mol's picture
User offline. Last seen 2 years 30 weeks ago. Offline
rank Regular
Regular
Joined: 2007-08-23
Posts: 20
Points: 0

Hi Vade,thnx for

Hi Vade,thnx for respond....

with my code,doesn't content box down 6px too? so overlapping not happen.But it doesn't happen, content box stay in its place.Shortly, I want anytime top box down any pixel so does content box, so no overlapping.

thnx

Top
Fri, 2009-07-03 16:30
#3
Vade
Vade's picture
User offline. Last seen 1 year 9 weeks ago. Offline
rank Enthusiast
Enthusiast
Joined: 2007-08-13
Posts: 315
Points: 276

I think you just want a

I think you just want a margin-top:6px on the #top, the #content should sit plush against the bottom of #top.

Is the 6px you want just to have a bit of a border on the top of #top like in your attached image?

Top
Sun, 2009-07-05 17:50
#4
mol
mol's picture
User offline. Last seen 2 years 30 weeks ago. Offline
rank Regular
Regular
Joined: 2007-08-23
Posts: 20
Points: 0

Hi Vade, Yes, I just want a

Hi Vade,

Yes, I just want a margin-top:6px on the #top, the #content should sit push against the bottom of #top.

No, there is no border, the white space on top of #top is the result of margin-top:6px in #top.

thx

Top
  • Locked