the best way center 2 divs inner div. Like this
1 2 3 4 5 6 7 8 9 10 11 12
1 ---------------------------
2 - main div -
3 - ------ ------ -
4 - -div1- -div2- -
5 - ------ ------ -
6 - -
7 ---------------------------
Width and Height of main div is fixed.
thanks
float one to the left and two to the right
<div style="width:100px;">
<div style="float:right;width:50px;">I m div 1</div>
<div style="float:left;width:50px;">I m div 2</div>
</div>
a simple solution might be to use a table:
<table>
<tr>
<td>Div 1 content here</td><td>Div 2 content here</td>
</tr>
</table>
Centering the content in each of the tds will give you what I think you're after.
Edit: OK this is getting voted down because I'm suggesting using a table for "presentation". At the end of the day, this works. It will give the desired result. The first answer, voted up, using css, is wrong. I cannot see that using a table instead of a div will ever have any impact on maintainability or future design changes, or that it makes any difference whatsoever.
Edit 2: To complete my answer, here is an example:
<html>
<head>
</head>
<body>
<style>
div { width: 100px; height: 30px; border: 1px solid red; margin: 0 auto 0 auto; text- align: center; }
table { border: 1px solid blue; width: 400px; }
td { padding: 20px 0 20px; }
</style>
<table>
<tr>
<td> <div class="one">div 1</div> </td>
<td> <div class="one">div 2</div> </td>
</tr>
</table>
</body>
</html>
This will give you the layout requested. I have added some padding to the divs in order to demonstrate one way of vertically aligning your content.
use the css by this position:absolute; or position: relative; and use left: px; top: px;
How about this? The only fixed thing you need to set are the margins of the inner div's, but this shouldn't harm as you didn't tell about any restrictions in the margins in the comments on this topic. As to the styles, only the borders are purely presentational, the remaining are the minimum required styles.
<!doctype html>
<html lang="en">
<head>
<title>SO question 1892901</title>
<style>
#main {
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
margin: 20px;
border: 1px solid black;
}
.inner.left {
left: 0;
right: 50%;
}
.inner.right {
right: 0;
left: 50%;
}
</style>
</head>
<body>
<div id="main">
<div class="inner left">inner left</div>
<div class="inner right">inner right</div>
</div>
</body>
</html>
I should add, the strict doctype is very important, otherwise this ain't going to work in IE due to the box model bug.