Display a div width 100% with margins
HtmlCssHtml Problem Overview
I want to display an expandable div
(width: 100%
) with margins...
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 300px;
margin: 10px;
}
<div id="page">
<div id="margin">
"some content here"
</div>
</div>
Html Solutions
Solution 1 - Html
You can use calc()
css function (browser support).
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: 300px;
margin: 10px;
}
Alternatively, try using padding instead of margin and box-sizing: border-box
(browser support):
#page {
background: red;
width: 100%;
height: 300px;
padding: 10px;
}
#margin {
box-sizing: border-box;
background: green;
width: 100%;
height: 300px;
}
Solution 2 - Html
Sometimes it's better to do the opposite and give the parent div
padding instead:
What I did was change the CSS of #page
to:
#page {
padding: 3%;
width: 94%; /* 94% + 3% +3% = 100% */
/* keep the rest of your css */
/* ... */
}
Then delete the margin
from #margin
Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px - so if you need exactly 300px, you could do something like padding:10px 3%;
and change the height:280px;
to add up to 300px again.
Solution 3 - Html
You can use the following CSS to achieve the desired result:
#page {
background: red;
overflow: auto;
}
#margin {
background: green;
height: 280px;
margin: 10px
}
Solution 4 - Html
The correct way to achieve this by standard is:
#margin {
background: green;
height: 280px;
margin: 10px;
width: auto;
display: block;
}
Solution 5 - Html
For LESS users only:
Using the nice solution of Vukašin Manojlović doesn't work out of the box because LESS executes + or - operations during the LESS compilation. One solution is to escape LESS so that it doesn't execute the operation.
https://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc
@someMarginVariable = 15px;
margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);
or can use a mixin like:
.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
@minusValue: (@marginSize+@paddingSize)*2;
padding: @paddingSize;
margin: @marginSize;
width: calc(~"100% - "@minusValue);
width: -moz-calc(~"100% - "@minusValue);
width: -webkit-calc(~"100% - "@minusValue);
width: -o-calc(~"100% - "@minusValue);
}
Solution 6 - Html
If possible, try to use padding with box-sizing instead, on #page element
#page {
padding: 10px;
box-sizing: border-box;
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 100%;
}