Search code examples
csspositioning

Positioning two elements inside wrapper element

I'm having a few problems trying to position two divs, side-by-side, inside a wrapper div, one with left align and the other with right align.

Here is my code:

<div class="member_top" style="padding:15px; background:#DDD;">
    <div class="member_top_wrap" style="width:960px; margin:0 auto; position:relative;">
        <div class="member_top_left" style="display:inline-block; width:480px;">Left</div>
        <div class="member_top_right" style="display:inline-block; width:480px;">Right</div>
    </div>
</div>

I tried adding position relative to the member_top_wrap and absolute on the two inside elements, using left and right positioning, but then the 15px padding wasn't working. Can somebody please explain how to achieve this?

This is an illustrated example:

enter image description here

I'm not looking for the padding in between the two elements as shown in the illustration, I added the gap to define the two elements.

Solution

  • You could simply float the divs and then clear the bottom of the floats,

    <div class="member_top" style="padding:15px; background:#DDD; width: 960px;">
<div class="member_top_wrap" style="margin:0 auto; position:relative;">
    <div class="member_top_left" style="display:inline-block; width:480px;float: left;">Left</div>
    <div class="member_top_right" style="display:inline-block; width:480px;float: left;">Right</div>
    <div style="clear: both;"></div>
</div>
</div>

    Demo here

    As a side note... you really don't want to do this with inline styles. A stylesheet is much more efficient.