I want box width and height to include all of the content, padding, border width, and margin by default. Is there a way to do this? Especially, I want to be able to specify something like width: 100% including everything up to the margin.
This is a vague question, but I'll answer the best I can.
Margin, by definition, is the area around the outside of your box; meaning there's no way to include margins inside of your div.
If you would like more padding on the inside of your box, but you don't want the box to resize, then use: box-sizing:content-box;
Or if you would like to include padding and the border, use: box-sizing:border-box;
A workable solution that preserves the size of your divs and removes overflow would look something like this:
#parent{
box-sizing:border-box;
width:100%;
height:200px;
padding:2em;
}
#child{
box-sizing:border-box;
width:100%;
height:100%;
padding:1em;
}
<div id="parent">
<div id="child"></div>
</div>
Just place the div you want to give margins to inside of another div that has padding. Thus creating faux margins.
if your margin is for example 10px you can use
width: calc(100% - 20px);
box-sizing: border-box;
browser support
w3schools.com reference
Set the CSS box-sizing property to border-box to make width and height include the content, border, and padding. This allows you to set width: 100% and still add padding or border. In other words box-sizing: border-box makes width include everything between the inner edges of the margin. There is no way to include the margin itself in such a way.
.example { box-sizing: border-box; width: 100%; padding: 10px }
Useful references
CSS Box Model visualization
CSS3 UI: box-sizing property
* { box-sizing: border-box } FTW
Maybe wrap another div around it and specified that div's width?
<div style="width: 100px; border: 1px solid blue;">
<div style="width: 100px; background:yellow; margin: 10px; border: 1px solid blue">
inner width 100px not including it's margin.
</div>
</div>
<div style="width: 100px; border: 1px solid blue">
<div style="background:yellow; margin: 10px; border: 1px solid blue">
inner width's 100px including it's margin.
</div>
</div>
Use display: flex; for the parent tag.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
box-sizing: border-box;
display: flex; /* it can put children in one line */
}
.left {
border: 1px solid black;
width: 20%;
float: left;
box-sizing: border-box
}
.right {
border: 1px solid black;
width: 80%;
margin: 0 10px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
Related
This question already has answers here:
Flex items not respecting margins and box-sizing: border-box
(2 answers)
Display a div width 100% with margins
(6 answers)
Closed 1 year ago.
<style>
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
}
.child {
box-sizing: border-box;
margin: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="app">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
I have a child div nested inside parent div which has a padding attribute. Child div has a margin attribute as well. I expected child div to be in the center like the image below.
however, when I run code, child div is skewed to the right bottom.
I set box-sizing attribute to border-box to calculate margin: 20px into the final width and height yet the result is the same. my question is 1)how do I center child div with margin applied 2)why border-box does not have any effects on child div?
Just remove margin and it will work. You have an explanation here in the answer: Flex items not respecting margins and box-sizing: border-box.
Keep in mind that box-sizing: border-box brings padding and borders into the width / height calculation, but not margins. Margins are always calculated separately.
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
}
.child {
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid blue;
}
<body>
<div id="app">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
If you want to make it center you should remove margin from child div as the margin is outside of child div and is pushing the child div to the left
This should work
<body>
<style>
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
}
.child {
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid blue;
}
</style>
<div id="app">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
You can also do this on parent div to center almost anything
/* display: flex;
align-items: center;
justify-content: center; */
I'm having some troubles with the 'float' in css.
I have a wrapper div with a width of 960px.I want to add 5 child-div in it with the width of 960 / 5 = 192px. And this is what I've got:
https://i.stack.imgur.com/R6bsw.png
This is my lines of code. Can anyone tell me what's wrong with them?
HTML
#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}
<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</section>
For each sub-boxes you have 1px of border which successively adds up to the total width.
So the container should have a width of (192+1+1)*5 = 970 and not 960 if you want all your sub-boxes to be contained on one line. You can also suppress the border or use a sub-box width of 190 (190+1+1=192)
Furthermore keeping 1px of free width space for the container can also help
About box-sizing:border-box:
The width and height properties (and min/max properties) includes content, padding and border, but not the margin.
For Fix it:
So, you must use box-sizing:border-box; because width of .box(192px) includes .box border width (1px for border-left and 1px for border-right).
if you don't add box-sizing:border-box,it will be added 2px(1px for border-left and 1px for border-right) to each .box,in the other words width .box gets width (192px + 2px = 194px).
* {
box-sizing:border-box;
}
* {
box-sizing: border-box;
}
.container {
width: 960px;
}
#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}
<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
Your 1px borders are adding-up to the width space of your boxes.
set in your css:
* {box-sizing: border-box; }
you can also use percentages widths btw to welcome yourself into the responsive era ;)
.box {
float: left;
box-sizing: border-box;
background: aquamarine;
border: 1px solid green;
width: 20%;
height: 100px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
in which box-sizing set to border-box is used to account borders, paddings and width into the inner box model width of the targeted element.
If you plan to support IE7 (which is not needed today) than you'll have to manually subtract the border-width from the element width.
I have the following code:
<div style="display: table; border: 1px solid green;">
<div style="display: table-cell; width: 1%; max-width: 1000px; background: red; height: 30px;"></div>
</div>
Changing the width property has completely counter-intuitive consequences.
A bigger example of this behavior: http://jsfiddle.net/8DUfr/2/. How is the width of the red rectangle calculated?
You were using width: percentage%; in the wrong div. You put it in the parent div for each red bar. I fixed your JSFiddle.
http://jsfiddle.net/8DUfr/4/
<h3>1%</h3>
<div style="display: table; border: 1px solid green; width: 1%">
<div style="display: table-cell; max-width: 1000px; background: red; height: 30px;"></div>
</div>
The box model in CSS has traditionally worked this way:
Given width w, the actual visible width of the box is calculated by adding w to the left and right padding of the element plus the left and right border. The width specified via the CSS width property, in modern browsers only tells CSS how wide the content area should be. See W3C documentation for an example.
For illustration purposes, let's say you have the following:
HTML
<div class="box">Something here</div>
CSS
.box {
width: 100px;
border: solid 1px red;
padding: 2px;
}
The visible width of .box is actually: 100 + 2 * 1 + 2 * 2 = 106px. To make the box measure exactly 100px, you have to subtract 6px from the specified width to compensate.
HTML
<div class="box-adjusted">Something here</div>
CSS
.box-adjusted {
width: 94px;
border: solid 1px red;
padding: 2px;
}
With the advent of CSS3, we now have the box-sizing property. The value that makes the width work as we expect is border-box.
HTML
<div class="box2">Something here</div>
CSS
.box2 {
width: 100px;
border: solid 1px red;
padding: 2px;
box-sizing: border-box;
}
See fiddle: http://jsfiddle.net/nnN6t/3/
i've been looking around to fix this, i havent seen a good answer on why this happens and how i can fix it..
basically i have a div that i set to 100% width and height, inside i have like a tabs section like on a broswer, i added a margin and padding to the main area, and when i set the tabs div to full width it sticks out some pixels, whats the correct way to deal with child divs sticking out of parents divs when playing with %'s and margins/padding
<div class="appview_fullscreen app_ama">
<center><strong>AMAMAMAMAMAMA</strong> </br>
<i>AMAMAMA</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
.appview_fullscreen
{
width: 100% !important;
height: 100%;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
}
.app_ama
{
}
.main_area
{
border: 1px solid green;
width: 100%;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
width: 100%;
}
demo : http://jsfiddle.net/S8RC3/
By simply removing 100% from the DIV elements.
DEMO
.main_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
height: 20px;
}
DIV as being a Block level element is already wide as it's parent container.
Additionally you have a typo: </br> should be <br />, <br/> or <br>
For your padding and border, use box-sizing: border-box;.
Example: http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php
Why is that the table div is going out from its container whenever I add padding?
Is there any work around for this problem?
<style>
.foroContainer {
width: 700px;
margin-left: auto;
margin-right: auto;
background: yellow;
}
.foroContainer .table{
display: table;
width: 100%;
padding: 8px;
border: 1px solid #a9a9a9;
margin-bottom: 1em;
}
.foroContainer .row{
display: table-row;
}
.foroContainer .cell{
display: table-cell;
}
#right.cell{
text-align: right;
border-top: 1px solid #a9a9a9;
}
}
</style>
<div class="foroContainer">
<div class="table">
<div class="row">
<div class="cell">asdasdasdas</div>
</div>
<div class="row">
<div id="right" class="cell">asdasdas | asdasdsad | asdasdasdas</div>
</div>
</div>
Alternatively, you could try altering the box-sizing property, either for every element on the page, or just that one container. E.g. for each element on the page, you would write:
* { box-sizing: border-box; }
This will alter the default box model that the browser uses so that width of the element is not changed, padding or not.
The hierarchy of encapsulation in CSS is:
margin - border - padding
When you are adding padding to an object you practically alter it's width.
If something is 100px in width and you add padding:10px it's width will become 120px (100 + 10 padding-left + 10 padding right)
This is the reason that your container is pushed over (it's width:100%) a good way would be another container internal to your table with width:100% but the table without width.