Why isn't the div called strip the same length as the two floated ones above

StackOverflow https://stackoverflow.com/questions/20972245

  •  25-09-2022
  •  | 
  •  

Question

I am new to web design (as you can tell) and playing around with page layouts. I have build the following very basic fluid page that has two column divs (floats) and one div below that I want to set the width to match that of the two floated ones above. As you can see from the screen grab, the red 'strip' isn't as long.enter image description here.

So basically what I have is 2 divs (#main and #extras) floated left. #main has a width of 65% and #extras has a width of 20%. Main has a left and right margin of 3.666666666666667% and #extras just a right margin of 3.666666666666667% which centers it on the page pretty much. I also have 1% padding for both #main and #extras.

I set the third div .strip (which should be exactly the same length as the #main and #extras combined as follows:

left/right margin 3.666666666666667% 2% padding (to equal the combined padding of the #main and #extras divs) width: 85%

My calculations (although my math is terrible) makes that add up and as far as I can tell the third div #strip should be as long as the two above. But as from the picture, it isn't.

Is this something to do with a compounding effect?

Here is my code:

<!DOCTYPE html>
<html>

<head>
<style>
#header {
width: 100%;
background-color: gray;
margin: 0;

}

#main {
float: left;
width: 65%;
background-color: steelblue;
margin: 0 3.666666666666667%;
padding: 1%;
}

#extras {
float: left;
width: 20%;
background-color: orange;
margin: 0 3.666666666666667% 0 0;
padding: 1%;
}

#footer {
width: 100%;
clear: left;
background-color: gray;
margin-top: 5%;
}

.strip {
margin: 0 3.666666666666667%;
clear: left;
background-color: red;
padding: 2%;
width: 85%;
}
</style>
</head>

<body>
<div id="header">2 divs 
<p>Header</p>
</div>

<div id="main">
<p>Main content</p>
</div>

<div id="extras">
<p>Extra stuff</p>
</div>

<div class="strip">
</p>I am the strip</p>
</div>

<div id="footer">
<p>Footer</p>
</div>
</body>
ts</html>
Was it helpful?

Solution

Its probably wrong calculation.. You can understand this by seeing this image., where the extra margin adding up!

enter image description here

OTHER TIPS

Try this code:

Fiddle:

CSS:

#main 
    {
float: left;
width: 65%;
background-color: steelblue;
margin-left: 3.666666666666667%;
padding: 1%;
    }

The problem is in the calculation. The first line width with values that you have add on properties is around 95.98% but the next lin (red div) the width is 88.86 %. Check the calcultions :)

The two divs as the top have padding between them, their combined width without padding is 85%, you need to set the width of strip underneath to 85% + the width of the padding between the top divs.

Your margin is not set correctly, you have to explicitly specify right margins. Make it like this:

#main {
    float: left;
    width: 65%;
    background-color: steelblue;
    margin: 0 0 0 3.666666666666667%;
    padding: 1%;
}

See this fiddle: http://jsfiddle.net/wCWQL/

Your earlier css was this: 

margin: 0 3.666666666666667%;

This is a shorthand, where the first value is for top and bottom margins and the second value is for right and left margins.

So you have to explicitly specify all margins so that only the left one is set.

Alternatively, you can only set the left margin:

#main {
    margin-left: 3.666666666666667%;
    ...
}

Hope that helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top