0

I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:

divs 2,3 and 4 should be centered inside div1.

My approach:

.div1 {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

.restofdivs {
    width: 470px;
    margin: 20px;
    min-height: 1px;
    float:center
}

the result is: the 3 divs (2,3 and 4) one on top of another...

Regards,

Huangism
  • 16,278
  • 7
  • 48
  • 74
Egidi
  • 1,736
  • 8
  • 43
  • 69

3 Answers3

2

This can easily be done with table display:

.table-display {
  display: table;
  width: 100%;
}
.cell-display {
  display: table-cell;
}
.div1, .div2, .div3, .div4 {
  padding: 40px;
}
.div1 {
  background: #ABC;
}
.div2 {
  background: #DEF;
}
.div3 {
  background: #CAD;
}
.div4 {
  background: #FAD;
}
<div class="div1">
  <div class="table-display">
    <div class="cell-display div2"></div>
    <div class="cell-display">
      <div class="div3"></div>
      <div class="div4"></div>
    </div>
  </div>
</div>
Salman A
  • 262,204
  • 82
  • 430
  • 521
1

Maybe set a width on .div1 and remove inline-block from .div1

.div1 {
  width: 960px;
  margin: 0 auto;
  text-align: center;
}

.restofdivs {
  width: 470px;
  margin: 20px;
  min-height: 1px;
 }
Rstew
  • 585
  • 2
  • 9
  • 21
Samuel
  • 5,529
  • 5
  • 25
  • 39
0

The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.

Using floats, you can create the layout you described as follows:

http://jsfiddle.net/ynt4suee/

Markup:

<div>
<div id="one" class="border clearfix">one
    <div id="wrapper">
        <div id="two" class="border">two</div>
        <div class="subcontainer">
            <div id="three" class="border">three</div>
            <div id="four" class="border">four</div>
        </div>
    </div>
</div>

CSS:

div.border{
border: 1px solid red;
}

div#wrapper{
width: 400px;
margin: 0 auto;
}

div#two{
width: 250px;
float: left;
}

div.subcontainer{
float: right;
width: 130px;
}

.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}

Here's another approach, using inline-block elements for the inner divs instead:

http://jsfiddle.net/xojqq4v5/

Markup:

<div id="one" class="border">
div 1
<div id="wrapper">
    <div id="two" class="border">div 2</div>
    <div id="subcontainer">
        <div id="three" class="border">div 3</div>
        <div id="four" class="border">div 4</div>
    </div>
</div>
</div>

CSS: div.border{ border: 1px solid red; margin-bottom: 5px; }

div#wrapper{
width: 450px;
margin: 0 auto;
}

div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}

div#two{
width: 300px;
}

div#three, div#four{
width: 140px;
}

Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.

The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.

A Steinmetz
  • 136
  • 6
  • Since it's a multi-columnar layout, you'll want to create a wrapper for the divs that you want to center, and another container div for the divs you want to appear on the right. With floated elements you'll want to use a clear-fix. More on that here: http://stackoverflow.com/questions/8554043/what-is-clearfix – A Steinmetz Nov 24 '14 at 17:34