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.
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....
For example:
.large{
font-size: 200%;
}
.bluebox{
background-color: blue;
height: 200px;
padding-left: 20px;
width: 200px;
}
<div class="bluebox">
<p class="large">This is a bigger paragraph</p>
</div>
I want to keep div in fixed widht and height when I add padding to the content. (Yes I can pre-calculate padding and then give proper width but if there is a simpler way?)
box-sizing: border-box; is what you're looking for.
It changes the default CSS box model to calculate widths and heights of elements including borders and padding but not margin.
6.1. ‘box-sizing’ property
border-box
The specified width and height (and respective min/max properties) on
this element determine the border box of the element. That is, any
padding or border specified on the element is laid out and drawn
inside this specified width and height.
EXAMPLE HERE
The following CSS should work
box-sizing: border-box;
padding:12px;
Is there a way to give a div element some padding INSIDE its border? For example, currently all the text inside my main div element goes right to the edge of the element's border. I'd like, as a general rule on this site, to have at least 10 to 20 px of space between the text and the border.
Here's a screen shot to illustrate what I currently have:
The CSS property you are looking for is padding.
The problem with padding is that it adds to the width of the original element, so if you have a div with a width of 300px, and add 10px of padding to it, the width will now be 320px (10px on the left and 10px on the right).
To prevent this you can add box-sizing: border-box; to the div, this makes it maintain the designated width, even if you add padding.
So your CSS would look like this:
div {
box-sizing: border-box;
padding: 10px;
}
you can read more about box-sizing and it's overall browser support here:
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
I see a lot of answers here that have you subtracting from the width of the div and/or using box-sizing, but all you need to do is apply the padding the child elements of the div in question. So, for example, if you have some markup like this:
<div id="container">
<p id="text">Find Agents</p>
</div>
All you need to do is apply this CSS:
#text {
padding: 10px;
}
Here is a fiddle showing the difference: https://jsfiddle.net/CHCVF/2/
Or, better yet, if you have multiple elements and don't feel like giving them all the same class, you can do something like this:
.container * {
padding: 5px 10px;
}
Which will select all of the child elements and assign them the padding you want. Here is a fiddle of that in action: https://jsfiddle.net/CHCVF/3/
Just use div { padding: 20px; } and substract 40px from your original div width.
Like Philip Wills pointed out, you can also use box-sizing instead of substracting 40px:
div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The -moz-box-sizing is for Firefox.
Padding is a way to add kind of a margin inside the Div.
Just Use
div { padding-left: 20px; }
And to mantain the size, you would have to -20px from the original width of the Div.
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"