CODEWITHSUNDEEP
csshtmlfixedfluid
Adam Halasz
Adam Halasz

Reputation: 58301

HTML / CSS : Fixed Margin & Fluid Width

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 Fluid Divs

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?

Upvotes: 11

Views: 25893

Answers (8)

ahuth
ahuth

Reputation: 1349

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.

Upvotes: 3

Sonali Kar
Sonali Kar

Reputation: 11

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!

Upvotes: 1

Yasser
Yasser

Reputation: 1808

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

Upvotes: 0

Pricey
Pricey

Reputation: 5929

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%;
}

Upvotes: 0

Marcel
Marcel

Reputation: 28087

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.

Upvotes: 0

Sotiris
Sotiris

Reputation: 40066

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/

Upvotes: 0

thirtydot
thirtydot

Reputation: 228182

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
}

Upvotes: 11

Jeff Parker
Jeff Parker

Reputation: 7517

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.

Upvotes: 0

Related Questions