I have some screen area (a parent div) that I want my <div> to completely fill up, but I also want to have a 5% gap around the its content. How could this best be implemented?
If I apply the rules: width: 100%; height: 100%; padding: 5%; they produce the desired effect (at least for <div> itself) but its bounds now exceed its parent element's bounds by 2 * paddingpx.
How can I ensure this <div>'s bounds take up 100% of its parent's, and still retains a 5% padding, without overflowing?
Note: I'm sure that I could find some hack ("just set width and height to 90%, since padding is 5%..), what I'm interested in is the most elegant, future proof, and intelligent solution. It seems that certain problems around positioning and sizing of individual divs almost totally go away when you are able to use more modern CSS technologies like Grid and Flex-box, so I'm open to that as well.
if my thought is right you need to use box-sizing:border-box , Specify that elements should have padding and border included in the element's total width and height:
like
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
}
please check this snippet
body {
margin:0;
padding:0;
}
.demo {
width:100%;
height:100vh;
float:left;
background:#000;
padding:5%;
box-sizing:border-box;
}
<div class="demo"></div>
Related
OK This seems really basic, but I can't seem to find an answer, maybe my search terms have been too general?
I have defined a top-level div that has a border round it, I want this to be the maximum size of the viewport.
This is the code in its most basic form
<body>
<div id="main">
test
</div>
</body>
And the CSS:
#main {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
border: 1px green solid;
}
See this JSFiddle:
http://jsfiddle.net/GpBS5/11/
The Div should have a 1px green border which is visible, but it always seems to have the bottom and right just off the display needing a scrollbar.
Use box-sizing: border-box
JSfiddle
The width and height of the div is 100% + 2px (2 borders, a pixel each), which requires scrollbars. box-sizing: border-box fixes this because it tells the browser to included the padding and border in the width and height.
I almost always use:
* {
box-sizing: border-box;
}
There's a default margin on the body. Add this to reset it to 0:
html, body {
margin: 0;
}
PLUS: Add box-sizing: border-box;to your #main DIV.
http://jsfiddle.net/gqL1zqeo/1/
I dont really understand why my example dont work, but something like that with bootstrap works perfectly.
<html style="height: 100%;">
<body style="height: 100%; padding-top: 70px;">
<div style="height: 100%; border: red solid;"></div>
</body>
</html>
http://fiddle.jshell.net/QVmjd/2/
Why my 100% height is more than 100%? Threrfore in http://getbootstrap.com/examples/navbar-fixed-top/, all is ok?
UPD:
more simple example with bootstrap http://fiddle.jshell.net/C3vrB/1/
UPD2: Examples became more clear to understand difference
the padding-top extends or adds 70px
<body style="height: 100%; padding-top: 70px;">
It's due to the way CSS handles the box model. Check out the W3C or the CSS Tricks rundown.
Essentially, your box's height is set by the height, and any additional styling such as padding, margin and border are applied to the outside of this size, so your element is being extended by the padding-top: 70px; to be 70 pixels higher than 100%;
If you need padding, you can either add padding by percentage:
height: 85%;
padding-top: 15%;
Bringing your box height to the total of 100%, or you could have the outer box a fixed height and add padding to the child elements, which does not effect the box size of the parent.
There is also the option of using the box-sizing property in CSS, which, when set to border-box, will render the padding, borders etc inside of the declared width and height of the box.
all you need to do this:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
and then your padding will be count as part of 100% height or width
I'm working on a site and I added previous and next buttons to my posts which I'm creating via a wordpress theme. For some reason on the hover stage of these blocked elements which are links the padding pushes beyond the max height and I can't figure out how to correct this problem. If you take a look at the link
http://hearthable.com/hearthstone-account-wipe/
At the end of the post content you will see Previous Post and Next Post. If you hover over either one you'll see the issue with the padding. I've been trying everything and haven't been able to figure out to not get the hover to flow over.
Thanks
Two different solutions:
Use box-sizing: border-box:
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 85px;
-webkit-box-sizing: border-box; /* Some Webkit versions requires a prefix */
-moz-box-sizing: border-box; /* Gecko (i.e. FireFox) requires a prefix */
box-sizing: border-box;
}
Compability tables are available here.
You can read more about CSS3 box-sizing at MDN, QuirksMode or other good places. Avoid W3Schools like the plague.
Calculate the height as height = desiredHeight - border - padding.
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px; // 85px - 20px padding
}
Finally, you can drop the height: 85px from #browse-posts a:hover, it is inherited anyway.
if you have used padding, along with it you should do something else to make the element fits to its original height.
example
div{width: 100px;}
div:hover{padding-left: 5px;}
in this case on hover effect you have added padding left, which makes the div body a 5px margin. in this case the div occupies its original width along with the 5px padding. in order to get rid from this problem.. you can reduce the width to 5px.
then your code will be..
div{width: 100px;}
div:hover{padding-left:5px; width:95px;}
do the same in your code.. you can find your own solution to your problem.
Simply reduce the height of the <a> to 65px
CSS
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px;
}
#browse-posts a:hover{
background: #cccccc;
}
Padding, by default, pushes the boundaries of an element outwards. This is a result of something called the box model. The box model defines the way that the width and height of a element is calculated (basically, which properties will contribute or not contribute to this calculation).
In your case, the padding on the <a> element extends outwards past the edge of the container. It's not noticeable normally because the element has no background, but on hover you add one, allowing you to see the true size of the shape.
You can fix this in one of two ways (plus more that I'm not mentioning.. CSS is pretty versatile!):
First of all, you can change the box model to something that will take padding into consideration on the overall size of the element:
box-sizing: border-box;
You will need to use vendor prefixes for this property, like so:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
(note that this needs to be applied to #browse-posts a)
Alternatively, you can simply hide the issue using overflow: hidden; which will not fix the padding from extending outwards, but it will not be visible
This would go on #browse-posts
I hope that helps you. Also, just for future reference, when posting a question it is always a good idea to post some of your source code so that people can easily find the areas that need to be looked at, rather than just a site link.
Cheers!
This is the css of my div. İ expect the background to fill the whole screen but it is bigger than my screen resolution, so a bottom scroll bar appears
.hero-unit {
padding:60px;
margin-top: 60px;
background: url("../img/bar2.jpg") no-repeat scroll 0;
height:233px;
width:100%;
left:0px;
background-size: cover;
position:absolute;
background-color:#eeeeee;
}
You can use box-sizing
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
This makes it so when you add padding, margin, or borders it will not effect the width. (this will not work IE7 and below)
You are adding padding to the already 100% width.
What you need to do (if you are using percentages) is change your padding to be a percentage and make it add up to 100 percent.
For example:
padding:5%;
width:90%;
I also found an alternative using overflow:hidden to remove the scroll bar. This will not remove your issue though as the padding will still overflow the window, just not visibly.
html, body
{
width:100%;
}
body
{
overflow:hidden;
}
See the jsfiddle here.
remove padding if it is necessary then decrease width.
Try to keep them in percentages like
padding:5%; /*desired value*/
width:80%; /*desired value*/
when they will be added, it should be less than or equal to 100%.
If you have margin then consider it also. (assume margin:5%;)
For Example:
<----------------100%---------------->
margin | padding| div |padding | margin
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->|
This is same for Horizontal (width) or Vertical (Height) adjustments.
Often horizontal overflow happens due to an element whose opacity is 0. You can't also see the element but it leads to horizontal overflow. Add the following code to css.
body {
overflow-x: hidden;
}
.hidden-thing {
position: absolute;
left: 100%;
width: 50px;
height: 50px;
opacity: 0;
}
This might be due to the margins and the padding of the body.
Add this block to your body to see if it helps:
body {
margin: 0;
padding: 0;
}
Additionally, you're defining padding to an already 100% element, making it larger than the body.
In designing a fluid layout, how do you use borders without ruining the layout.
More specifically, I have a HTML widget which consists of five divs. I would like the five divs to take up all the room in the containing element. I would also like to have a 1px border around each.
I tried:
.box { float: left; height: 100%; width: 100%; border: 1px solid red; }
This doesn't work: there will be an extra 10px in width causing the boxes to wrap. Reducing the width percentage doesn't work as it will not take up the correct amount of space and for certain page sizes, will still wrap.
Whats the proper way to manage the interaction between these elements?
See this article.
Basically, in the "traditional" CSS box model, the width of a box element only specifies the width of the content of the box, excluding its border (and padding).
In CSS3, you can switch to a different box model as follows:
box-sizing: border-box;
Browser-specific implementations of this are:
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
This will cause the box sizes to include the element's border and padding. So you can now specify
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
width:20%;
border:1px solid red;
float:left
}
and have the five divs take up all the width of the containing element without wrapping.
Note that this is not supported by older browsers. For these, you'll have to wrap each box into a second box, as per other responses on this page.
Only put width: 100% on the outermost div, and don't put a border on it. If you do this, then the inner boxes will fill the space (assuming you haven't floated them or anything) since they're block elements, and you won't have to worry about borders adding to the total size.
If you really need the appearance of five solid single pixel nested borders, you can do something like this (with properly semantic names, hopefully):
<div class="one">
<div class="two">
<div class="three">
etc.
</div>
</div>
</div>
<style>
.one {
width: 100%;
}
.two {
border: 1px solid red;
padding: 1px;
background: red;
}
.three {
border: 1px solid red;
background: white;
}
</style>
As you can see, you can fake the second border using padding and background colors on the second div (might even cut down on the total number of divs by doing this; just remember you can't pad the outmost div without screwing up your width).
Oh boy, I almost hate to mention this, but there is a very easy way to do this in a horizontal bar. It isn't "pixel perfect" except at your minimum width, but is not discernible to the naked eye.
Divide the container div by the number of items. Let's say, you have six nav items with a white border (this is especially good for numbers that don't divide into 100 because it won't be perfect in any case).
Set your total width for each left-floated child div to the correct fraction (using % for left or right margin or padding) so that they equal # 100%. Go ahead and put a 1px border-right on the child divs. For the last div at the right end, either make a second class with no border or just use style='border:none'.
Then, at your minimum width, slowly drop the width of each child div until they fit.
Here is a bit of code from an old page of mine using this method for a liquid page with minimum width of 960px (958 px and a 1px border on each side):
.navitem {
width: 16.57%;
height: 35px;
float: left;
text-align: center;
font: 1em/35px arial,sans-serif;
border-right: 1px solid #eee;
margin: 0 auto 0 auto;
padding: 0;
}
I think it actually is as close to pixel perfect as you can get at minimum width, and at higher widths although the right-hand div is maybe 4 px wider than the others, you can't tell by looking at it. (Obviously, this wouldn't work if you need a right border on the right-most div, since you'd see a few pixels of background.)
This will get you fairly close but not 100% of the way (pun intended). To give an element 100% height it needs to know "100% of what?". All parent elements must also be given 100% height and this includes the body. Or as the W3C put it: "If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'." As you can see we also need to give the body "position: absolute;" for the height to be honored. This example also divides the width into five equal columns with borders (and some padding and margin just for fun):
<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
div.column {
height: 100%;
border: 1px solid blue;
margin: 1em;
padding: 2em;
}
</style>
<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>
As you can see when you test it we have no problem with the witdh. This is because the "sections" that divide the width have no padding, margin or borders. Thus the width we set will be the width they occupy on screen. Now, this is not strictly true in practice. I have actually set the widths 19.95% and not the expected 20%. Problem is that some browsers (IE for one) have a rounding error when adding up percentages and the more subdivisions to add up the greater the error.
Where this method obviously fails is when it comes to the height. Unlike "width: auto;", which will make the div occupy the available horizontal space, "height: auto;" will only make the div as tall as its content. You have to specify "height: 100%;" to get the div to fill the height of the window but alas, when adding margin, padding and borders, the rendered height of the div becomes greater than the viewport, resulting in a vertical scrollbar.
Here I can only really see two choices; Either 1) accept that the divs don't quite fill the window height and set their height to maybe 80% or 2) Skip the bottom border and set the body to "overflow: hidden;", which will crop off the parts of the divs that protrude beyond the edge of the window.
Finally, of course you could also make use of some simple scripting to achieve what you're after. Shouldn't be very complicated at all - but that's a question with another tag... Happy coding!