Problems with float

Get Started
1

I am making a site on dreamweaver. But i am encountering some issues with float.

I have a division “Header” which contains two divisions “Logo” and “Nav”

“Logo” contains the logo and “Nav” contains the links for navigation.

I have floated “Logo” to the left because i want the links to be there on the right of the logo.

That works but when i add margin-top to the Nav, the whole header(including the logo) shifts down. Rather than just the Nav shifting down.

Im posting the html and css code here.

<div class="header">
<div class="logo"><a href="#"><img src="web page3.png" width="400" height="130" style="display:block;" /></a></div>
  <div class="nav">

    <ul>
    <li><a class="onscreen" href="index.php">Home</a></li>

    <li><a href="aboutus.php">About Us</a></li>

    <li><a href="services.php">Services</a></li>

    <li><a href="whyfulcrum.php">Why Fulcrum?</a></li>

    <li><a href="contactus.php">Contact Us</a></li>
    </ul>
  </div>

    <!-- end .header --></div>

.header
{
width:960px;
height:145px;
}

.logo
{
float:left;
}

.nav
{
        margin-top:50px;
    margin-right:20px;
}
2

The problem i have found with margins is that they tend to act strangely at the very top of the page but not anywhere else, I haven’t really given it too much thought to be honest as usually i just set an overflow to stop the margin from collapsing and it tends to work fine. See the below example:

.header {
    height: 145px;
    overflow: hidden;
    width: 960px;
}
3

It worked. Thanks a lot :slight_smile: