1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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