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.

Answer 3

I found a way to do this keeping the ratio of the widths of the containers exactly 70% : 30%. Try this, works for me...

HTML:

<div id="page">
<div id="a"><div id="aWrap">This is 70% of the available space...</div></div>
<div id="b"><div id="bWrap">This is 30% of the available space...</div></div>
</div>

CSS:

*{
    margin:0;
    padding:0;
}
#page{
    margin:30px;
}
#a{
    width:70%;
    float:left; 
}

#aWrap{
    margin-right:15px;
    background:#aaa;
}
#b{
    width:30%;
    float:right;        

}
#bWrap{
    margin-left:15px;
    background:#ddd;
}

Best of luck!

Answer 4

You can use the javascript onload and onresize functions. In each you first find the width of the container grid and then calculate the width of your 70pc and 30pc grids in pixels and set them via JS.

For example use the following code in your onload and onresize functions for the page:

container_width = document.getElementById('container_box').style.width
width_70 = (container_width - 90) * 0.7
width_30 = (container_width - 90) * 0.3
document.getElementById('seventy_pc_box').style.width = width_70
document.getElementById('thirty_pc_box').style.width = width_30

Answer 5

It may be obvious, and you've probably already twigged, but (70% + 30% + 30px) > 100%. Without some kind of calculative ability, this won't work, and CSS2 doesn't appear to have that ability. Javascript could do it, as another poster has suggested, and CSS 3 is due to add it, apparently.

Not that it's a solution to your original enquiry, but you can enforce a fixed width on the right hand container, and maintain fluidity on the left.

<div style="margin-left: 30px; float: right; width: 270px;">
    <p>Content text ...</p>
</div>
<div style="margin-right: 300px;">
    <p>Sidebar text ...</p>
</div>

The original commenter is correct though, your best bet is one or the other.

Answer 6

Here my solution.

html

<div id="wrapper">
    <div id="left"></div>
    <div id="rightWrapper">
        <div id="right"></div>
    </div>
</div>

css

#wrapper {
    margin:0 30px;
}

#left {
    width:70%;
    height:200px;
    background:black;
    float:left;
}
#rightWrapper {
    margin-left:99px;
}
#right {
    width:30%;
    height:200px;
    float:right;
    background:grey;
}

Demo: http://jsfiddle.net/GEkG7/1/

Answer 7

Thirtydot has a nice answer (up vote from me) to adjust the left positioning of the div relative to its container, I would only suggest that it may need testing in certain browsers, such as older versions of Internet Explorer.

Alternatively you could consider that adjusting a left position by a fixed amount is more confusing than just applying a different width.

Your also asking for a fluid width and a fixed margin, overall this is no longer a fluid layout... your 30px will look the same in a large or small resolution.. but your widths will change, either fix the widths to pixels or set the margin to a percentage (Maybe try using max-width for some browsers too for bigger resolutions). Newer browsers also adjust a pixel layout when increasing the text/zoom size, older browsers require use of EMs for text size changes.

example with percentages and padding:

#container {
    margin: 0 8% 0 8%;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 62%;
    position: relative;
    padding-right: 8%;
}

Answer 8

Yeah, my solution was similar to others. A #wrap has 30px padding, #main and #side have their percentages set and floated left and right respectively. #main has an extra <div> inside it with 30px of right margin.

http://jsfiddle.net/Marcel/FdMFh/embedded/result/

Works fine in all the modern browsers I have installed (Chrome, Firefox, Safari, Opera, IE9 RC), I'm sure it'll break down somewhere older but should be fixable.