Display a div width 100% with margins
You can use the following CSS to achieve the desired result:
#page {
background: red;
overflow: auto;
}
#margin {
background: green;
height: 280px;
margin: 10px
}
div with 100% width including margins
be sure to use box-sizing: border-box
when using padding
to force the padding to behave like it should. As far as the horizontal padding goes, you can just add padding: 0 3px;
to .container
*{ //adds to all elements or you can just add to the ones that use padding
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container{
border: 1px solid gray;
padding: 0 3px; <-----add this
}
FIDDLE
Div 100% width and a margin
You don't have to give width when you are using margin-left and margin-right.
Try This:
#main
{
margin-left: 10%;
margin-right: 10%;
background: red;
}
Margin on fixed div with width 100%?
If you change width: 100% for this css:
right:0px;
left: 0px;
margin-left:17px;
margin-right:15px;
it works but i dont think its the best solution.
How to make an element width: 100% minus padding?
box-sizing: border-box
is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing
, etc.) are not needed in modern browsers.
Margin-right broken on width 100%
An absolutely positioned element is positioned with top
, left
, right
and bottom
, not with margin
.
Divs not occupying 100% screen width
What is causing the overflow is the grid-gap
property in #header
and .grid
, they are not counted towards the percentage values you've added, you should remove that and use padding to create the desired spacing.
Edit:
#header {
width: 100%;
height: 50px;
background-color: red;
display: grid;
grid-template-columns: 30% 70%;
/* grid-gap: 10px; remove this */
position: fixed;
}
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 25% 75%;
/* grid-gap: 10px; and this */
}
Edit 2:
Alternatively you can also use the fr
unit to occupy the remaining space and still use the grid-gap
property:
#header {
width: 100%;
height: 50px;
background-color: red;
display: grid;
grid-template-columns: 30% 1fr; /* 1fr will be 70% - 10px */
grid-gap: 10px;
position: fixed;
}
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 25% 1fr; /* 1fr will be 75% - 10px */
grid-gap: 10px;
}
Related Topics
What to Use in Place of ::Ng-Deep
Is It Wrong to Change a Block Element to Inline With CSS If It Contains Another Block Element
How to Deal With Page Breaks When Printing a Large HTML Table
Inline Elements Shifting When Made Bold on Hover
Single VS Double Quotes (' VS ")
Li Item on Two Lines. Second Line Has No Margin
What's HTML Character Code 8203
Html Attribute With/Without Quotes
How to Open Link in a New Tab in Html
Change Select List Option Background Colour on Hover
Absolutely Positioned Flex Item Is Not Removed from the Normal Flow in Ie11
An Invalid Form Control With Name='' Is Not Focusable
Reading HTML Content from a Uiwebview