SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: margin:0 auto;

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin:0 auto;

    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>

    <ul class="navigation">


    <li><a href="Services.html" alt="Popular services"> Services</a></li>
    <li><a href="Portfolio.html"alt="Popular services">Portfolio</a></li>
    <li><a href="About.html"alt="Popular services">About us</a></li>
    <li><a href="Contact-us.html" alt="Popular services"> Contact </a> </li>

    </ul>
    </div>



    ------------------------------------------


    .logo
    {
    margin: 0 auto;


    }

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

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

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just got this figured out to --embarassed......

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

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    Almost correct, although it may seem to be the same, the width is actually auto by default, which differs slightly from 100% .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •