Center a group of <div> within another <div>

Discussion in 'CSS' started by Zourz, Apr 11, 2007.

0
  1. #1
    Hello

    I have a huge problem centering a group of divs within another div.
    The group of divs should is placed in a row (now using float:left).

    I have this so far:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <title></title>

  <style>
   .container {
    background-color:#FF0000;
    width:800px;
    height:500px;
   }

   .greenBox {
    float:left;
    background-color:#00FF00;
    width:200px;
    height:300px;
   }

   .blueBox {
    float:left;
    background-color:#0000FF;
    width:200px;
    height:300px;
   }
  </style>

 </head>

 <body>
  <!-- Red container -->
  <div class="container">
   <!-- Green box -->
   <div class="greenBox"></div>

   <!-- Blue box -->
   <div class="blueBox"></div>
  </div>

 </body>
</html>
    HTML:
    The green and blue div contain a lot of other elements, but for now I've
    made them empty for you to read it more easily.

    I think, using "float:left" to have the divs in a row, makes it kind of impossible
    to center?

    I've tried to use "display:inline;" also, instead of "float:left", but I do not succeed.

    Anyone knows how to solve this?

    Greetings
     
    Zourz, Apr 11, 2007 IP
  2. briansol

    briansol Well-Known Member

    Messages:
    221
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #2
    assuming its a fixed width, you can do this:

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <title></title>

  <style>
   .container {
    background-color:#FF0000;
    width:800px;
    height:500px;
   }

   .greenBox {
	float: left;
	margin-left: 100px;
    background-color:#00FF00;
    width:200px;
    height:300px;
   }

   .blueBox {   
	margin-left: 350px;
    background-color:#0000FF;
    width:200px;
    height:300px;
   }
  </style>

 </head>

 <body>
  <!-- Red container -->
  <div class="container">
   <!-- Green box -->
   <div class="greenBox"></div>

   <!-- Blue box -->
   <div class="blueBox"></div>
   <br style="clear: both;" />
  </div>

 </body>
</html>
    Code (markup):
     
    briansol, Apr 11, 2007 IP
  3. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    its probably float: left thats the problem here

    a solution is to make another div outside the container and use text-align: center, but that isnt a good solution, since its using one more div
     
    deques, Apr 11, 2007 IP
  4. Zourz

    Zourz Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    Hi Briansol & Deques.

    It's not a fixed width Im afraid.
    The width of the container is 100% of the parent container actually.
    And the value of "margin-left" dynamically changes.
    Like this:

      <!-- Red container -->
  <div class="container">

    <div style="margin-left:100px;">
     <div style="background-color:#FFFF00; width:100%;">

      <!-- Green box -->
      <div class="greenBox"></div>

      <!-- Blue box -->
      <div class="blueBox"></div>
     </div>
    </div>
   </div>
  </div>
    HTML:
    (I want to center the divs in the yellow area)

    Having another <div style="text-align:center;"> didn't work for me Deques. :(

    Can't we get rid of "float:left" anyhow?
    And grouping the <div> in another way? And then having that group centered.

    Kind Regards
     
    Zourz, Apr 11, 2007 IP
  5. briansol

    briansol Well-Known Member

    Messages:
    221
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #5
    you're going to need to wrap them

    outer = 100%
    2 inners, floated, 50%, margin 0 auto;
    div's inside to hold content, which will be centered in its containing div from the margin auto.

    <div id="wrapper">
    <div id="leftfloat">
    <div id="leftcontent">
    text
    </div>
    </div>
    <div id="rightfloat">
    <div id="rightcontent">
    text
    </div>
    </div>
    </div>
     
    briansol, Apr 12, 2007 IP
  6. Zourz

    Zourz Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #6
    Hi Briansol

    I think I do not understand what you mean...

    Now I have this example (3 boxes in a row).
    These three divs is wrapped.

    This works in FF and IE7, but not in IE6.
    To make it work in IE6, I have to set the wrapper-width to 313px instead of 310.
    How come?

    310 px = 100+100+100 + 5+5 (two margins).

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <title></title>

  <style>
   .container {
    background-color:#FF0000;
    width:800px;
    height:500px;
   }

   .content {
    margin-left:200px;
   }

   .contentArea {
    width:100%;
    background-color:#FFFF00;
   }

   .wrapper {
    width:310px; /* 3*100 + 2*5 (margin=5) */
    margin:0 auto;
   }

   .greenBox {
    float:left;
    background-color:#00FF00;
    width:100px;
    height:300px;
    margin-right:5px;
   }

   .blueBox {
    float:left;
    background-color:#0000FF;
    width:100px;
    height:300px;
    margin-right:5px;
   }

   .purpleBox {
    float:left;
    background-color:#FF00FF;
    width:100px;
    height:300px;
   }

  </style>

 </head>

 <body>
  <!-- Red container -->
  <div class="container">

    <div class="content">
     <div class="contentArea">

      <!-- Green box -->
      <div class="wrapper">
       <div class="greenBox"></div>

      <!-- Blue box -->
       <div class="blueBox"></div>

      <!-- Purple box -->
       <div class="purpleBox"></div>
      </div>

     </div>
    </div>
   </div>
  </div>

 </body>
</html>
    HTML:
    Greetings
     
    Zourz, Apr 12, 2007 IP