SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering Left Floated Divs

    I have 5 divs of specific widths that are floated left (so they all flow)

    The div surrounding them however is dynamic width

    so like this:

    <div style="width: 100%">
    <div style="width: 100px;"></div>
    <div style="width: 100px;"></div>
    <div style="width: 100px;"></div>
    </div>

    How Can I center all of the middle divs based on the dynamic width even if they are floated left?

    Thanks,

    Jordan

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could wrap the floats in a set 500px div and place a margin:auto on that. You would need to calculate the width. The solution by Paul looks like you don't need to calculate the widths, so it's variable. I'd check that out.
    Last edited by sdt76; Dec 1, 2011 at 16:35. Reason: changing the div width

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Wrap the five 100px floated fixed width divs in another div with a width set to 500px and margin:auto; ?

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You can center floats by doing the following:

    Code CSS:
    #outer {
        float:left;
        position:relative;
        right:-50%; 
    }
     
     
    #inner {
        position:relative;
        right:50%; 
    }
     
     
    .column {
        width:100px;
        float:left;
        background:black;
    }

    Code HTML4Strict:
    <div id="outer">
      <div id="inner">
        <div class="column">Center column</div>
        <div class="column">Center column</div>
        <div class="column">Center column</div>
      </div>
    </div>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @kohoutek

    Nice that worked perfect, even in IE thanks!

    I think that was the Paul O' Brian method mentioned above but it applies more directly to what I was trying.

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    @Jordash, yep, I learned that from Paul.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Tags for this Thread

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
  •