Two Divs on the same row and center align both of them

Question

I have two divs like this

<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>

I want them to display on the same row, so I used float:left.

I want both of them to be at center of the page as well, so I tried to wrap them with another div like this

<div style="width:100%; margin:0px auto;">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

But it doesn't work. If I change the code to this

<div style="width:100%; margin-left:50%; margin-right:50%">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

then it's going to the center, but the horizontal scrollbar is there and it seems like it's not really centered as well.

Can you please kindly suggest to me how can I achieve this? Thanks.

Edit: I want the inner div (Div 1 and Div 2) to be center align as well.

Answer 1

You could do this

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>  

http://jsfiddle.net/jasongennaro/MZrym/

1. wrap it in a div with text-align:center;
2. give the innder divs a display:inline-block; instead of a float

Best also to put that css in a stylesheet.

Answer 2

Could this do for you? Check my JSFiddle

And the code:

HTML

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

CSS

div.container {
    background-color: #FF0000;
    margin: auto;   
    width: 304px;
}

div.div1 {
    border: 1px solid #000;
    float: left;
    width: 150px;
}

div.div2 {
    border: 1px solid red;
    float: left;
    width: 150px;
}

Answer 3

both floated divs need to have a width!

set 50% of width to both and it works.

BTW, the outer div, with its margin: 0 auto will only center itself not the ones inside.

Answer 4

I would vote against display: inline-block since its not supported across browsers, IE < 8 specifically.

.wrapper {
    width:500px; /* Adjust to a total width of both .left and .right */
    margin: 0 auto;
}
.left {
    float: left;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #000;
}
.right {
    float: right;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #F00;
}

<div class="wrapper">
    <div class="left">Div 1</div>
    <div class="right">Div 2</div>
</div>

EDIT: If no spacing between the cells is desired just change both .left and .right to use float: left;

Answer 5

Align to the center, using display: inline-block and text-align: center.

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    margin: 0 auto;
    text-align: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
    display: inline-block;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Align to the center using display: flex and justify-content: center

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Align to the center vertically and horizontally using display: flex, justify-content: center and align-items:center.

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Answer 6

Better way till now:

1. If you give display:inline-block; to inner divs then child elements of inner divs will also get this property and disturb alignment of inner divs.

2. Better way is to use two different classes for inner divs with width, margin and float.

Best way till now:

Use flexbox.

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 7

Please take a look on flex it will help you make things right,

on the main div set css display :flex

the div's that inside set css: flex:1 1 auto;

attached jsfiddle link as example enjoy :)

https://jsfiddle.net/hodca/v1uLsxbg/