Two boxes each share 50% in width - css

Question

I have this code:
<div style="margin: 0px; padding: 0px;">
<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; left: 0; margin-bottom: 10px; position: relative;">
....
</div>
<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; right: 0; margin-bottom: 10px; position: relative;">
....
</div>
</div>
My end goal is to have two boxes each sharing 50% of width with margin in-between them.
Instead they are shown below each other which I do not want. They appear not to respect their designated position values. (I even set width to only 40% for both, so it was not an issue of all space used.)
For reference: I chose not to use float since I don't want them to realign underneath each another. I chose not to use table display since I would like IE7 compatibility. I have never done much CSS, so my question is hopefully simple to solve (crossing fingers)

Answer 1

As others have mentioned, you are missing either float: left (remove top/right/bottom/left values) or position: absolute.
If you want width to be fluid but padding to be fixed (or vice-versa), then you need width: 50% with box-sizing: border-box. This makes the padding part of that 50%.
If you want width and padding to both be fluid, this trick isn't necessary. Just use percentage measurements for both so the total is 50% (e.g., width: 48%; padding: 1%).

Answer 2

You really just need to float your inner divs, to make it all a bit easier, add box-sizing attribute.
Lets say having this HTML:
<div class="box"></div>
<div class="box"></div>
And then just add something like this:
.box {
float: left;
width: calc(50% - 5px);
margin-right: 5px;
padding: 8px;
border: 1px solid #aaaaaa;
box-sizing: border-box;
}
.box:last-child {
margin: 0 0 0 5px;
}
By using calc(), you have to subtract the margin of each .box. And the use of box-sizing property is to avoid that border and padding were added to the width, which is the default behavior on the CSS box model. You should have a look on caniuse to see compatibilities and the use of vendor prefixes.
There're really more than a way to do the same thing. But I think this one is a very solid way to achieve your goal.
http://jsfiddle.net/gVwar/

Answer 3

I believe this fiddle solves your problem. Error being you didn't float the divs.
Block level elements will never be placed adjacent to one another when not floated, unless when positioned absolutely or fixed.
Note: If you want to position your elements with top, left & right properties, you'll have to set their position: absolute.

Answer 4

Are you looking for something like this?
Check the demo out at the link above.
<div class="box1">X</div>
<div class="box2">X</div>
CSS
* {
margin: 0;
padding: 0;
}
.box1 {
width: 48%;
background-color: white;
border:1px solid black;
}
.box2 {
width: 48%;
background-color: white;
border:1px solid black;
}
.box1, .box2 {
display: inline-block;
margin: auto;
}
#media screen and (max-width: 300px){
.box1, .box2 {
width: 46%;
float: right;
display: inline-block;
margin-right: 1%
}