Margin:0 auto;

HTML & CSS
1

hi all

working on nav bar i have two divs and am trying to centre them both ?

I have tried putting them in on div and assigning a class to the main one with no luck

any help would be great

<div class=“logo”>

<div class=“navcontain”>
<a href=“Index.html”> <img src=“Images/nav.png” width=“250px” height=“” alt=“we” /></a>
</div>

   &lt;ul class="navigation"&gt;
				

        		&lt;li&gt;&lt;a href="Services.html" alt="Popular services"&gt; Services&lt;/a&gt;&lt;/li&gt;
       			&lt;li&gt;&lt;a href="Portfolio.html"alt="Popular services"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        		&lt;li&gt;&lt;a href="About.html"alt="Popular services"&gt;About us&lt;/a&gt;&lt;/li&gt;	
      			&lt;li&gt;&lt;a href="Contact-us.html" alt="Popular services"&gt; Contact &lt;/a&gt; &lt;/li&gt;			   			    				 				
         							
			&lt;/ul&gt;
            &lt;/div&gt;

.logo
{
margin: 0 auto;

}

.navcontain
{
float:left;
width:300px;
margin:0 auto;
}

.navigation
{
float:left;
width: 500px;
margin:30px auto 30px;
}

2

just got this figured out to --embarassed…

Why do i need to assign a width when im using margin:0 auto;???

3

See my reply to your other post that should fix all your issues. As far as your current Q: block elements are 100% width by default. so it’s actually being centered you just cant see it since the auto end up being calculated to 0.

4

Almost correct, although it may seem to be the same, the width is actually auto by default, which differs slightly from 100% :).

5

Ok. Ryan brought up a good point the default SETTING = AUTO. Which does differ slightly from actually setting width:100% by the fact that padding and border will not be added to the calculated width. So I will rephrase , a block element with width:auto ( no width set) will by default extend from left edge f its parent to the right edge of its parent, and thus leave an "auto margin-left and auto margin right of 0 each.

6

I’ve had that nitpick happen to me before so I’m sorry I had to do it to you :).

It also looks like .logo will need some sort of clearing mechanism, aka overflow:hidden; on it :).