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.
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 :)
Better way till now:
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.
Better way is to use two different classes for inner divs with width, margin and float.
Best way till now:
Use flexbox.
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;
}
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/
div
with text-align:center;
div
s a display:inline-block;
instead of a float
Best also to put that css in a stylesheet.
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.
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;
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_
}
_x000D_
<div class="outerdiv">_x000D_
<div class="innerdiv"></div>_x000D_
<div class="innerdiv"></div>_x000D_
</div>
_x000D_
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_
}
_x000D_
<div class="outerdiv">_x000D_
<div class="innerdiv"></div>_x000D_
<div class="innerdiv"></div>_x000D_
</div>
_x000D_
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_
}
_x000D_
<div class="outerdiv">_x000D_
<div class="innerdiv"></div>_x000D_
<div class="innerdiv"></div>_x000D_
</div>
_x000D_
Source: Stackoverflow.com