Home/ Questions/Q 829067
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T03:49:28+00:00

I am a little bit confused. Here is a small web page. There are

  • 0

I am a little bit confused. Here is a small web page.
There are two main div-s: top and mainBlock.
First contains an image. The problem is that firebug shows that div#top’s height is equal to 0 and because of that the next div mainBlock moves up. If I would delete this piece of code:

div#logo{
    float: left;
}

everything will start working fine and div#mainBlock will be below the div#top. Could you, please, explain me how it works and how to avoid this in proper way?

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Paralab - Website &amp; interface design, web apps development, usability</title>
<style text="text/css">
html, body{
}
div#logo{
    float: left;
}
#top{
  width: 100%;
}
#mainBlock{
  width:100%;
}
</style>
</head>
<body>
    <div id="top">
        <div id="logo">
            <img alt="logo"  src="img/logo.png" />
        </div>
    </div>
    <div id="mainBlock">
        Contact Us
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to clear your float. There are a few ways to do this, I’d check out this article on QuirksMode about clearing floats for more info.

    • 0