HTML / CSS : Fixed Margin & Fluid Width

Question

How should I make this with CSS:

I would like to have 2 divs or more and their width should be in percent, but the margin between the divs should be fixed, in this example 30px

The problem for me is the margin between the two divs because I can put the divs into a bigger div and set left and right padding to 30px and thats ok, but what should I do with the margin between the two divs?

If I try to add for example to the first div margin-right:30px; then the width of the div will be 70% + 30px what will be overall greater than 100% and the second div will fall down.

So what is the solution for this?

Answer 1

Is this close enough?

Live Demo

HTML:

<div id="container">
    <div id="left"><div id="left2">leftgggg</div></div>
    <div id="right">right</div>
</div>

CSS:

#container {
    margin: 0 30px 0 30px;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 70%;
    position: relative;
    left: -30px;
}
#left2 {
    height: 200px;
    margin: 0 0 0 30px;
    background: #ccc
}
#right {
    height: 200px;
    float: right;
    width: 30%;
    background: #666
}

Answer 2

Calc support is decent now, so you can use that to mix and match units. Using that, you can come up with something that works pretty well:

http://jsfiddle.net/CYTTA/1/

#a {
    margin-left: 30px;
    width: calc(70% - 30px - 15px);
}

#b {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(30% - 30px - 15px);
}

You may have to prefix calc with -webkit or -moz.

The width of the first one is 70% minus the left margin (30px) and minus half the middle margin (15px). The second one is 30% minus the right margin (30px) and minus half the middle margin (15px).

While the widths won't be exactly equal to 70% and 30%, you'll have a fluid layout with fixed margins.