CSS Forum

**vapor2020** · 08-31-2008, 07:09 PM

I have this HTML:

<HTML>
<BODY>

<div id="logo">
<h1><span>Mega Machine Shop</span></h1>
</div>

<div id="call">
<p>Call Us: (360) 555-5555</p>
</div>

</BODY>
</HTML>

and this CSS:

#logo {
float:left;
display:inline;
width:155px;
margin:0;
padding:0;
border: 1px solid yellow;
}

#call {
margin:100px 0 0 0px;
padding:0;
border: 1px solid yellow;
}

For some reason the #logo Div is taking a 100px top margin. Why would this be? What am I not seeing?

Thanks in advance.

-Dan

**vangogh** · 08-31-2008, 08:32 PM

I'm not entirely sure how to explain why it's happening, but if you add clear: both or clear: left to #call it should look the way you want.

**vapor2020** · 08-31-2008, 08:55 PM

I don't want #call to clear #logo. I need it to form a second column.

**vangogh** · 08-31-2008, 08:58 PM

Then just remove the 100px top margin on it. The 100px top margin on #call is what's pulling down #logo.

**vapor2020** · 08-31-2008, 09:00 PM

I know. That's the point. The margin on #call shouldn't be pushing down #logo, should it?

**LadynRed** · 09-01-2008, 12:30 PM

If you don't want the logo to move with the flow, you'll have to float #call too.

**vapor2020** · 09-01-2008, 02:47 PM

I solved my problem, although it still doesn't make any sense. I simply added an element above it within a header div. i.e.:

<body>
<div id="container">
<div id="header">
<div id="menu">
</div>
<div id="logo">
</div
<div id="call"
</div>
</div>
</div>
</body>

And now #logo doesn't move down with #call. I really don't get it, but it works.

**vapor2020** · 09-01-2008, 02:48 PM

Thanks for the help, Vangogh and LadynRed. This site has gotten me out of many a tough spot.

**vangogh** · 09-01-2008, 11:20 PM

Glad we could help in some way Dan. I would have done the same thing LNR suggestion in floating both divs. I'm still not entirely sure why what you were seeing was happening. I wouldn't have expected it, but at least you found a way to make it work.