How do I create padding around a div but not pushing out the container?
http://codepen.io/vincentccw/pen/jgGtd
I create 2divs but then when I set a padding around it the child div got push out??
This is the normal behaviour of the default box model, i.e the padding and the border dimensions are added to the width property.
If you want to avoid clumsy calculations, you can change the default model (content-box) using box-sizing like so:
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
this would make the padding and border of all the elements part of the declared or inherited width and height, thus keeping your layout intact.
Now, if you were to declare a width of 100% or a 100px, and then add padding or border, it wouldn't have affected the total width, but would rather be included within the confines of the declared width.
HTML
<div>
<div>lol</div>
</div>
CSS
div{
background:yellow;
width:auto;
height:auto;
padding:1em;
}
div div{
background:red;
}
Padding is in the inside of the elements. I believe you want to use margin here, which is outside of block elements:
div{
background:yellow;
width:400px;
height:200px;
margin:1em;
}
div div{
margin:0; padding:0; border:0;
background:red;
}
Try This (Values can be changed based on what you are doing). I credit SoloLearn for helping me learn it (the app is Learn HTML for android).
<div width:100%;height:100%; style="background-color:white; color:black; padding:20px;">
Width and height auto fit themselves, background colors make box color, color is text color, and padding adds space after content. You can also nest tags if you want to change padding color since there is no value or element that I know of to do it inside of the tag.
This is a cheat, but it works when you just need some html to get the edges of the text in a few spaces:
div style="padding-left: 4em; padding-right: 4em"
Related
I've defined widths of the containers in percentage. I'd like to add a border (3px on right side of a width), since container width is in % while the border width is in px, how can I adjust the width of the container?
<div class="wrap">
<div class="left">...</div>
<div class="right">...</div>
</div>
.wrap{
width:100%;
}
.left{
width:30%;
}
.right{
width:70%;
}
I'd like to add 3px border on the right side of .left. For example:
.left{
width:30%;
border:3px solid #000;
}
Since I have defined width in the %, what is the best way to re-adjust the width of the .left. I can roughly decrease the width to 29%, but I want to do precisely.
Use the box-sizing: border-box property. It modifies the behaviour of the box model to treat padding and border as part of the total width of the element (not margins, however). This means that the set width or height of the element includes dimensions set for the padding and border. In your case, that would mean the element's width and it's border's width would consume 30% of the available space.
Support for it isn't perfect, however vendor prefixes will catch most if not all modern browsers:
.left {
width: 30%;
border: 3px solid #000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
More information can be found on the MDN and Quirksmode.
According to Quirksmode, using the 3 vendor prefixes above (-moz-, -webkit- and -ms-), you get support for all browsers, even IE8.
The easiest cross-browser way is to NOT set the border on the outer divs, and instead set it on a NEW div inside .left. Simple, and works well.
That's a bit tricky but check out this post on a way to get around it:
Percentage Plus Pixel Sizing (and Example)
Box Sizing on CSS-Tricks (and Example)
The box-sizing property may also be of interest to you, check this out:
How do I add 1px border to a div whose width is a percentage?
In my case I ended up adding an outer div with a padding of the size that I wanted the original margin to be, and width 100%. That allowed me to set the inner div width to 100%, fitting entirely inside the padding (that would work as the previous margin I had set)
Just change px to vw like
border-width: 10px;
to
border-width: 10vw;
Its do whats percentage do....
I've defined widths of the containers in percentage. I'd like to add a border (3px on right side of a width), since container width is in % while the border width is in px, how can I adjust the width of the container?
<div class="wrap">
<div class="left">...</div>
<div class="right">...</div>
</div>
.wrap{
width:100%;
}
.left{
width:30%;
}
.right{
width:70%;
}
I'd like to add 3px border on the right side of .left. For example:
.left{
width:30%;
border:3px solid #000;
}
Since I have defined width in the %, what is the best way to re-adjust the width of the .left. I can roughly decrease the width to 29%, but I want to do precisely.
Use the box-sizing: border-box property. It modifies the behaviour of the box model to treat padding and border as part of the total width of the element (not margins, however). This means that the set width or height of the element includes dimensions set for the padding and border. In your case, that would mean the element's width and it's border's width would consume 30% of the available space.
Support for it isn't perfect, however vendor prefixes will catch most if not all modern browsers:
.left {
width: 30%;
border: 3px solid #000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
More information can be found on the MDN and Quirksmode.
According to Quirksmode, using the 3 vendor prefixes above (-moz-, -webkit- and -ms-), you get support for all browsers, even IE8.
The easiest cross-browser way is to NOT set the border on the outer divs, and instead set it on a NEW div inside .left. Simple, and works well.
That's a bit tricky but check out this post on a way to get around it:
Percentage Plus Pixel Sizing (and Example)
Box Sizing on CSS-Tricks (and Example)
The box-sizing property may also be of interest to you, check this out:
How do I add 1px border to a div whose width is a percentage?
In my case I ended up adding an outer div with a padding of the size that I wanted the original margin to be, and width 100%. That allowed me to set the inner div width to 100%, fitting entirely inside the padding (that would work as the previous margin I had set)
Just change px to vw like
border-width: 10px;
to
border-width: 10vw;
Its do whats percentage do....
So I'm trying to accomplish something. I'm building a responsive website, and I've run into an interesting issue.
I have a #wrapper, it's background is #FFF. Inside that for display needs i placed a header with some content and a body and each has a different background so it's easy to see what's positioned where.
For my Wrapper, i gave it a width of 100% so it expands and contracts with the browser window. But limited it's max-width to 750px as i dont want the website to be wider than that.
#wrapper {
position:relative;
margin:20px auto;
padding:0px 20px;
width:100%;
max-width:750px;
background:#FFF;
}
Notice i placed a padding of 0px 20px on it. This is where my issue comes in. When you re-size the browser window the wrapper does contract along with it, but for some reason it disregards the padding on the right. I want to make sure that does NOT happen, because no matter the browser window size I want 20 pixel space on left & right sides.
Any ideas, hints, lessons :) ? http://jsfiddle.net/wuJ9H/
Thanks!
Adding box-sizing:border-box fixed it for me (Chrome 26, FF 19, IE9/10). This causes padding to be included in the width calculation.
Example: http://jsfiddle.net/wuJ9H/3/
#wrapper {
position:relative;
margin:20px auto;
padding:0px 20px;
width:100%;
max-width:750px;
background:#FFF;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Why does it work?
When you re-size the browser window the wrapper does contract along
with it, but for some reason it disregards the padding on the right.
To be clear, your original version didn't just hide the right padded area. It hid the right padded region + 20px, namely, the width of the left padded area. This is because you told the box the be 100% wide plus any padding or borders.
Thus, your box was 100% + 40px wide.
Adding box-sizing: border-box instructs the browser to include padding and borders in the width calculation. It's very handy for percentage-based values.
The box-sizing CSS property
If you add box-sizing:border-box to #wrapper then the padding will be included in the width.
jsFiddle
#wrapper {
-moz-box-sizing:border-box;
box-sizing:border-box;
}
You may want to make max-width:790px now for it to appear the same when the window is wide.
Support
box-sizing is not supported in IE7 and below Reference. If you want to support IE7 then you will need to place an inner wrapper inside #wrapper.
jsFiddle
#wrapper {
position:relative;
margin:20px auto;
width:100%;
max-width:750px;
}
#inner {
padding:0px 20px;
background:#FFF;
}
Simply removing the width should maintain the expanding functionality while fixing your issue:
#wrapper {
position:relative;
margin:20px auto;
padding:0px 20px;
max-width:750px;
background:#FFF;
}
http://jsfiddle.net/wuJ9H/2/
You need to include the padding in your size definitions. Add box-sizing:border-box to the wrapper element.
I have this div on the CSS:
#bodycontent {
max-width:980px;
margin:auto;
}
#navleft {
width:18%;
border:0px;
float:left;
}
#rightcontent {
max-width:80%;
border:0px;
float:right;
}
and on the HTML:
<div id="bodycontent">
<div id="navleft">
some stuff
</div>
<div id="rightcontent">
some stuff
</div>
</div>
Now I have 2 problems:
If I set the divs 20% and 80% I'll have the divs displayed not side by side but one above and one below
I'd like to have 25px of padding-left on the rightcontent div but, again if I set the padding, the div goes below the other.
Why? The padding is not inside?
The width property is defined (in CSS 2) as the width of the content, not the space between the borders. Padding goes inside the borders, not inside the width.
In CSS 3, you can change this with the box-sizing property but this has limited support.
The problem you are facing is because of the box model. The width you declare is the width of the content and not the true width of the element.
To learn more about the box model
To change this so that the border and padding are all part of the elements width you can use border-box
#your-element {
-moz-box-sizing: border-box;
-webkit-box-sizing:
border-box; box-sizing: border-box;
}
Read about the css box model.
Your content is the inner-most box, and it will have the width you specify. Padding, border, and margin are all added to this width. Padding will be inside the border, but not inside the content width.
Being an amateur CSS coder, trying to do away with "table" syndrome, I'm having some issues getting a fixed footer to work properly.
I have my footer DIV set to 100% width but because there is a 30 pixel padding inside of the DIV, the footer extends 60 pixels past 100%, if you know what I mean.
How can I solve this issue?
My CSS is this:
#footerDiv {
background:url(../images/background/mainBG.gif);
margin:0 auto;
padding:15px 30px;
width:100%;
bottom:0;
left:0;
z-index:4;
position:fixed
}
When you set width of your element with CSS, it sets only the content area of the DIV. Padding and Border width are calculated outside the content area. You can however put another DIV inside your footer DIV and set padding of it to 30px, to preserve 100% width of the outer DIV.
<DIV style="width:100%">
<DIV style="padding:30px">
<!-- Actual footer content -->
</DIV>
</DIV>
This shall be CSS2.0 compatible. ;)
It sounds like a box-model issue. For more information look here.
The code to make it right looks like this,
.footer {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Since it makes more sense to me, I sometimes apply that to all elements on the page (i.e. replace .footer with *).