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.
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 3 years ago.
I have been searching around but I can't find a solution to apply to my own problem.
I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16px and margin: 5px that makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?
To try it out: http://jsfiddle.net/wuSDh/
You can use calc, modern browsers support it and IE9+ as well.
div {
margin: 10px;
width: calc(100% - 20px);
height: 10px;
background: teal;
}
<div></div>
Browser support
Block level elements naturally fill their parent, however if you specifically set width, you override this behavior, allowing margin and border to be added to the specified width. You specify 100% width on the body, thus giving an opportunity for it to overflow the document horizontally if there is an element rendered to it's right inner edge.
Example: http://jsfiddle.net/trex005/6earf674/
The simple remedy to this is to stop declaring the body's width. If for some reason this is required, you can set the margin to 0;
The same principle applies to the input, but it is a little more complicated. Inputs(text/password) and textareas, even when set to display as block will derive their widths from size and cols respectively. This can be overridden by specifying a width in CSS, however they also have user agent specified borders and margins so you have the overflow problem again. To fix this overflow, you need to set the input's display to block and it's box-sizing:border-box. Border box will calculate the borders and padding as part of the width.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Once you do that, you will notice there is extra spacing between the elements. This is because the display:block forces the line break, and the <br> tags that you added are redundant. Remove those, and you are in business!
Demo: http://jsfiddle.net/trex005/6earf674/1/
I had this issue with 100% heights, and eventually it struck me that the answer is to use a padding on the element above the 100% height/width (i.e. the parent).
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
In short, the padding of the parent has the same effect as the margin of the child!
Looe the width:100%; then simply use as much padding as you like:
#login_box {
padding:10px;
margin:50px;
}
Demo
http://jsfiddle.net/PFm3h/
Isolated effect:
Demo
http://jsbin.com/ozazat/1/edit
Lots of padding, lots of margin, no problem at all.
Another solution is to position the INPUT’s absolute and add left/right props:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
You would need to adjust margins etc, since they will be out of the relative layout flow. You can also add padding without trouble, since you didn’t set a fixed width.
This technique is widely supported in all browsers.
Demo: http://jsfiddle.net/wuSDh/3/
You can adjust your textbox width 100% to 95% .Now it's looking good
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
See this : http://jsfiddle.net/wuSDh/
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 have a div at the bottom of my page which is good, the problem is that it is overlapping my sidebar on the left, so how do I scoot it over? I trued to do float:right, but it does not seem to do anything, I'm assuming because it's in a fixed position. I also tried to change the width, but that just cuts it from the right side. So how can I get it where I need it, which is just taking up the remaining part of the page where the side bar is not?
I'm shooting for this look:
.footer {position:fixed; bottom:0; float:right; background-color:lightgray; font-size:90%}
You could use FLEXBOX for that
I made a little fiddle using flexbox since you didn't provide your layout
JSFIDDLE
The fixed property for the footer is not required.
Also, specifying the footer element as block will
ensure proper behaviour when applying style to it.
.footer { position: relative; display: block; background-color: #f2f2f2; float: right; font-size: 90%; width: auto; overflow: hidden; }
The width was set to auto because I don't the exact size of your sidebar. To set it to a number, you need to perform some calculation. For example:
If the sidebar width is 30%, and also has a border, then the total width is: 30.2%;
That is, 1px left plus 1px right borders.
Although, the size depends on the border width.
Then the footer width should be set to 68.8% or 68.75% if it has no border.
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 3 years ago.
I have been searching around but I can't find a solution to apply to my own problem.
I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16px and margin: 5px that makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?
To try it out: http://jsfiddle.net/wuSDh/
You can use calc, modern browsers support it and IE9+ as well.
div {
margin: 10px;
width: calc(100% - 20px);
height: 10px;
background: teal;
}
<div></div>
Browser support
Block level elements naturally fill their parent, however if you specifically set width, you override this behavior, allowing margin and border to be added to the specified width. You specify 100% width on the body, thus giving an opportunity for it to overflow the document horizontally if there is an element rendered to it's right inner edge.
Example: http://jsfiddle.net/trex005/6earf674/
The simple remedy to this is to stop declaring the body's width. If for some reason this is required, you can set the margin to 0;
The same principle applies to the input, but it is a little more complicated. Inputs(text/password) and textareas, even when set to display as block will derive their widths from size and cols respectively. This can be overridden by specifying a width in CSS, however they also have user agent specified borders and margins so you have the overflow problem again. To fix this overflow, you need to set the input's display to block and it's box-sizing:border-box. Border box will calculate the borders and padding as part of the width.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Once you do that, you will notice there is extra spacing between the elements. This is because the display:block forces the line break, and the <br> tags that you added are redundant. Remove those, and you are in business!
Demo: http://jsfiddle.net/trex005/6earf674/1/
I had this issue with 100% heights, and eventually it struck me that the answer is to use a padding on the element above the 100% height/width (i.e. the parent).
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
In short, the padding of the parent has the same effect as the margin of the child!
Looe the width:100%; then simply use as much padding as you like:
#login_box {
padding:10px;
margin:50px;
}
Demo
http://jsfiddle.net/PFm3h/
Isolated effect:
Demo
http://jsbin.com/ozazat/1/edit
Lots of padding, lots of margin, no problem at all.
Another solution is to position the INPUT’s absolute and add left/right props:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
You would need to adjust margins etc, since they will be out of the relative layout flow. You can also add padding without trouble, since you didn’t set a fixed width.
This technique is widely supported in all browsers.
Demo: http://jsfiddle.net/wuSDh/3/
You can adjust your textbox width 100% to 95% .Now it's looking good
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
See this : http://jsfiddle.net/wuSDh/
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"