[Kanishk Dudeja]

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;
}

[sash_oo7]

Kanishk Dudeja, on 23 January 2012 - 07:07 AM, said:

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;
}

first i wud like to say dont use inline styles and
try this code

.header
{
width:960px;
height:145px;
overflow:hidden;
}
.logo
{
width:140px;
margin:0 15px 0 0;
float:left;
}
.nav
{
    width:500px;
    margin:50px 20px 0 0;
    float:right;
}

This post has been edited by sash_oo7: 23 January 2012 - 07:25 AM

[Kanishk Dudeja]

sash_oo7, on 23 January 2012 - 07:21 AM, said:

first i wud like to say dont use inline styles and
try this code

.header
{
width:960px;
height:145px;
overflow:hidden;
}
.logo
{
width:140px;
margin:0 15px 0 0;
float:left;
}
.nav
{
    width:500px;
    margin:50px 20px 0 0;
    float:right;
}

Hey that worked. Thanks a lot. It worked because of adding float:right to nav.

But why is it working now?

I mean when i floated logo to the left it was understoof that nav would be on right.

Why do i have to add float:right to nav too?

[Wickham]

When you want block elements like divs to be side by side, all divs need a float. You had a float for the first but not the second. It makes a difference.

You may also want to clear the float so that the content following the header isn't affected. You can do this by adding overflow: hidden; to the .header div. If you don't clear the floats, following content may move up over the floated divs. (I see that it has already been recommended.)

This post has been edited by Wickham: 23 January 2012 - 08:44 AM

[Kanishk Dudeja]

okay. Thanks