2 Votes Vote

Div Background-color Overflows Into Adjacent Div

Posted by topdog 932 days ago Questions| div html color All
I am trying to set up 2 divs side by side. A 100x100 divIcon div next to a topMenu div that takes up the rest of the width with a height of 100 pixel (104 with border accounted for). What I see is that the topMenu div's background-color affects the divIcon's background color.

I put a sample up: http://nkcorner.com/tmp/

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1">
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="divIcon" id="divIcon">
divIcon
</div>
<div class="topMenu">
topMenu
</div>
</body>
</html>

CSS:
.divIcon
{
width:100px;
height:100px;
float:left;
}
.topMenu {
background-color:red;
height:100px;
}


What is going on here? I know that I can give the divIcon a background-color to override the red, but I am trying to understand the behaviour. Shouldn't the topMenu div be separate and therefore it's style shouldn't affect divIcon?

Thanx
Discuss Bury


Who Voted for this Question