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

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.

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

.outerdiv_x000D_
{_x000D_
    height:100px;_x000D_
    width:500px;_x000D_
    background: red;_x000D_
    margin: 0 auto;_x000D_
    text-align: center;_x000D_
}_x000D_
_x000D_
.innerdiv_x000D_
{_x000D_
    height:40px;_x000D_
    width: 100px;_x000D_
    margin: 2px;_x000D_
    box-sizing: border-box;_x000D_
    background: green;_x000D_
    display: inline-block;_x000D_
}

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

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

.outerdiv_x000D_
{_x000D_
    height:100px;_x000D_
    width:500px;_x000D_
    background: red;_x000D_
    display: flex;_x000D_
    flex-direction: row;_x000D_
    justify-content: center;_x000D_
}_x000D_
_x000D_
.innerdiv_x000D_
{_x000D_
    height:40px;_x000D_
    width: 100px;_x000D_
    margin: 2px;_x000D_
    box-sizing: border-box;_x000D_
    background: green;_x000D_
}

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

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

.outerdiv_x000D_
{_x000D_
    height:100px;_x000D_
    width:500px;_x000D_
    background: red;_x000D_
    display: flex;_x000D_
    flex-direction: row;_x000D_
    justify-content: center;_x000D_
    align-items:center;_x000D_
}_x000D_
_x000D_
.innerdiv_x000D_
{_x000D_
    height:40px;_x000D_
    width: 100px;_x000D_
    margin: 2px;_x000D_
    box-sizing: border-box;_x000D_
    background: green;_x000D_
}

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

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.

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;

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.

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/

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;
}

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/