Question

I’m working on a layout that includes two adjacent fluid-width divs (each width: 50%) inside one container that is 80% of the body width.

I’d like to have a 10px margin between the left and right 50% divs, but I need the whole assembly to fit within the 80% body width container. I understand that reducing the % width of the left and right DIVs will work to give me room for the 10px center margin, but it would also mean the whole left DIV/right DIV/10px margin assembly would often not be 80% of the body width.

Is there a way to recalculate the width of the left and right DIVs so they cumulatively occupy 80% of the body width when there is a fixed 10px margin in between them, no matter what the browser window is resized to? Not sure if this is doable with CSS. If Javascript is the only way to achieve it that’s fine, but it would be great if there’s some hidden CSS trick I’m missing.

Here’s my CSS:

#logoplace {
width: 200px;
height: 200px;
background-color: red;
margin-left: auto;
margin-right: auto;
}

#navcontainer {
height: 30px;
width: 80%;
background-color: white;
margin: 5px auto;
opacity: 0.7;
}

#navcontainer:hover {
opacity: 1;
}

#rowone {
width: 80%;
height: 120px;
background-color: white;
margin: 5px auto;
}

#rowoneone {
width: 50%;
height: 120px;
background-color: green;
margin-right: 5px;
float: left;
}

#rowonetwo {
width: 50%;
height: 120px;
background-color: blue;
margin-left: 5px;
float: right;
}

html, body
{
height: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

And my HTML:

<div id="logoplace">
</div>
<div id="navcontainer">
</div>
<div id="rowone">
    <div id="rowoneone">
    </div>
    <div id="rowonetwo">
    </div>
</div>

Finally here’s a JsFiddle that shows the result I’m getting. The right-floated DIV is getting pushed down, obviously because I’ve set both floated DIVs to 50% and then added the fixed margin.

Any help is greatly appreciated!

Answer 1

http://jsfiddle.net/thirtydot/KX6eR/30/

Add an extra wrapper:

<div id="rowone">
    <div id="rowonewrapper">
        <div id="rowoneone"></div>
        <div id="rowonetwo"></div>
    </div>
</div>

​
Then reposition your two inner divs slightly:

#rowonewrapper {
    margin-right: 10px;
}
#rowoneone {
    width: 50%;
    height: 120px;
    background-color: green;
    float: left;
}

#rowonetwo {
    width: 50%;
    height: 120px;
    background-color: blue;
    float: right;
    position: relative;
    left: 10px;
}