CSS problem - centering floating divs inside a container

Question

I'm having some issues with centering a bunch of floating divs. I've searched SO quite a bit (specifically here and here), but I seem to be missing something. I'll post my code and hopefully somebody here can see what the problem is...

What I'd like to accomplish is something along these lines

screenshot http://efredericks.net/layout.PNG

The behavior that I'm currently seeing is that everything is floating properly, but pushed to the left. No matter what I've done I can't seem to get it to center.

My outer container is centered in the browser properly, but nothing inside is.

HTML

<body>
  <!-- outer_container - centers for IE -->
  <div id="outer_container">

    <!-- container - wrapper for content -->
    <div id="container">

      <!-- header - logo : menu -->
      <div id="hdr">

        <div id="hdr_right">
          <h1><a href="#" id="lhome">logo</a></h1>
          <div id="menu">
          <ul>
            <li><a id="menu_i1" href="#">item 1</a></li>
            <li><a id="menu_i2" href="#">item 2</a></li>
            <li><a id="menu_i3" href="#">item 3h</a></li>
          </ul>
          </div> 
        </div>

        <div class="clear"></div>

      </div>
      <!-- /header -->

      <!-- main -->
      <div id="main">

        <!-- problem area here -->
        <div id="outer">
          <div class="inner">a</div>
          <div class="inner">b</div>
          <div class="inner">c</div>
          <div class="clear"></div>

          <div class="inner">a</div>
          <div class="inner">b</div>
          <div class="inner">c</div>
          <div class="clear"></div>
        </div>

      </div>
      <!-- /main -->

    </div>
    <!-- /container -->

  </div>
  <!-- /outer_container -->

</body>

CSS

* {
  margin: 0px;
  padding: 0px;    

  font-family: Tahoma, Arial, sans-serif;
  color: #888750;
}

img {
  border: 0px;
}

body {
  background: #000;
}

  margin: 0 auto;
  position: relative;
}

#hdr {
  background: #000;
  height: 99px;
}

#hdr_right {
  margin: 30px 2px 0px 0px;
  height: 75px;
  float: right;
}

#hdr img {
  float: left;
  border: 0px;
  margin: 5px 0px 0px 5px;
}

#hdr ul {
  margin-top: -10px; 
}

#hdr li {
  float: left;
  padding: 0px 5px;
}

#main {
  text-align: left;
  background: #333;
}

.clear {
  clear: both;
}

#outer {
    overflow: auto;
    padding: 5px;
    width: 790px;
    margin: 0 auto;
    text-align: center;
}
.inner {
    float: left;
    background: #181818;
    margin: 5px;
    width: 200px;
}

Your definition of "center" is very very "specific". Usually when you "center" something you center one box inside of another. You're asking to automagically move lots of elements into position as you specified, can you really call that centering? Or if I misunderstood, can you make an actual image of what you need? And it *sounds* like you may just want to use `inline-block` and `text-align:center` instead of floating. It's hard to tell because you're not showing your ideal, finalized version of what you REALLY want. — meder omuraliev, Jul 26 '10 at 09:21
ok, i added a quick n dirty screenshot of the end result i'd like to see — erik, Jul 26 '10 at 10:16
Have you considered `inline-block` and `text-align:center` on the parent element? — meder omuraliev, Jul 26 '10 at 10:18
the parent element being the #outer container? yes i had actually...it still continues to stick to the left — erik, Jul 26 '10 at 10:20

score 7 · Accepted Answer · answered Jul 26 '10 at 09:52

From what i understand you want the divs in the div#main to be centered and not off to the left slightly?

If that is the case then you can do numerous things, you can either increase the amount of margin around each div.inner to about 30px:

.inner {
    float: left;
    background: #181818;
    margin:5px 30px;
    width: 200px;
}

or decrease the width of div#outerto 630px (and removing text-align as you dont really need that):

#outer {
    overflow: auto;
    width: 630px;
    margin: 0 auto;
}

Hope thats what you were looking for!

CSS problem - centering floating divs inside a container

1 Answers1