which is causing things to look sloppy.
There is a div which expand to 100%, but the right border is cut off.
See the dev site here - it is under Feed
https://frozen-dusk-2587.herokuapp.com/
Here in image of me toggling the border using Chrome Dev Tools:
and here it is with me toggling on the border:
This is the default behaviour for all box-sizing:content-box elements, which is the default value for all elements. add box-sizing:border-box; to #at_view. This causes the browser to include border and padding in relative width calculations.
If you define an element with a width of 100% and also a border, the border is added to the 100% so this makes the total width more than 100% which is causing your problem (read up on the css box-model: http://www.w3schools.com/css/css_boxmodel.asp).
So one solution is that you could change the width of #at_view to less than 100%, try 90-95% - until things look right.
Or to be very specific, you can define #at_view width as 100% and subtract the border using calc():
#at_view {
width: calc(100% - 20px);
}
(Subtracting 20px, since it looks like 20px is the width being added by the border, as the border is 10px --> 10px on the left + 10px on the right = 20px.)
Even such basic things as the box model can be modified using CSS Rules.
See
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
to change the default behavior of the box model:
#at_view{
box-sizing:border-box;
}
Related
3 div.
body margin of 10px.
Picture on the bottom
I want the divs to equally have the same width, the same margins on the sides while also covering/using the whole browser's width whichever size it is (desktop, tablet, mobile)
Here's what I did by using pourcentage and what I believe:
" The full browser width is 100%
If the div's margin are 10px and the body's margin are 10px then
The div's width would be around 30%.
Let's try 30%.
It fits - blank space too.
Let's try 30.5%.
Blank space, it's not equal on the sides.
Let's put 32%.
etc. "
but often I get extra blank space on the right or one div to go down because it's actually too wide.
Is there a more simple way to do this? Properties?
Thank you.
Design:
Media queries:
Your issue stems from the fact that you are mixing relative units with absolute ones - pixels are an absolute unit as 10px is always 10px, but a percentage is relative to the screen width, so no matter how close you can get it to fitting the full width of the screen, as soon as you change the width of the screen all of the values are going to change.
You have (at least) two options here:
First, switch all your units to percentages, so that every measurement is relative to the width of the screen. In other words, if you use percentage based margins, you will know exactly how much space you can allocate to each thing.
Alternatively, if you really need the margins to be an absolute pixel width, use CSS calc:
This feature of CSS allows you to mix unit types easily, and let the browser do the math to figure it out.
For example:
width: calc(33.333% - 20px);
will style the div to take up one third of the screen width, minus the width of a 10px margin on the left and a 10px margin on the right.
If all three divs have this width, the total space taken up will equal to 100% of the screen, with the space for all of the margins accounted for.
(if you want the first and last divs to have no margin on the left and right respectively, just change the calculation to match!)
More Information About 'Calc'
Extra tip! Remember that white-space in your code will add spaces in between your elements, so if you style everything to fill exactly 100% width, these extra spaces may still cause your items to break if you have not dealt with this
I would say the best way to approach this is have container elements for each div, so a structure like this:
<div class="container-full">
<div class="container-third">
<div class="content">
Hello world
</div>
</div>
</div>
.container-full{
width: 100%;
}
.container-third{
width: 33.33%;
padding: 10px;
}
.content{
width: 100%;
}
Utilize padding, instead of margin. Make sure to use box-sizing: border-box
display:flex is already widely suported, so you can rely on that instead of floats.
if you don't use box-sizing:border-box; for all the elements - you could at least for the divs in question along with a 10px padding.
Here goes sass:
.container {
display:flex;
& > div{
flex:0 0 33.33%;
padding: 10px;
box-sizing: border-box;
}
}
or you could use a percentage margin between the divs.
.container div{
width:30%;
float:left;
margin-right:5%;
}
.container div:last-child{
margin-right:0;
}
I'm getting strange behaviour from margins. A vertical scrollbar appears even though I'm no where near the bottom. I assume this is the desired behaviour, considering that I tested this and got the same results in the latest versions of Chrome, IE11 and Firefox.
The following code results in a scrollbar
<html>
<head>
<style>
body {
margin: 0;
height: 100%;
padding: 1px;
}
div {
margin: 15px;
}
</style>
</head>
<body>
<div>Hmm</div>
</body>
</html>
Changing the body's padding to 0.1px results in no margin.
Changing the body's padding to 0px also results in a margin.
Also, adding box-sizing: border-box to the body removes the scrollbar as long as the padding is not zero.
I haven't added a Fiddle because I can't replicate it there. You need to test this in a simple html file.
Is this actually the expected behaviour? Is there a logical explanation why they implemented it like this?
Looks like the reason you're seeing the scrollbar is a combination of defining a height and setting a padding value. The height property dictates the height of an element's content, excluding the margin and padding added onto that value. The scrollbar appears after adding padding because you've set the content of the element's height to 100% of the page, plus the padding, causing the element's entire height to overflow.
Additionally, applying box-sizing to an element makes the height and width properties include padding in the value. Funny thing is, it doesn't include margin. So if you were to apply:
body {
box-sizing: border-box,
margin: 1px,
padding: 0
}
You'd still see the scrollbar. Once understanding that an element's height property, by default, only dictates the height of the content within the element, it makes a little more sense.
Hope this helps :)
Setting the height of the body to 100% makes it take all of the height of it's parent element which is the html element. The html element's width and height in turn are governed by the window it is in. Adding a margin or a border would increase the dimensions beyond the available space thus inducing the scroll.
However, the other issue is that adding the margin to the div is pushing the body down by 15px. This has to do with collapsing margins.
Check out https://stackoverflow.com/a/2680515/6184852 for further information.
Is there a way to have the padding on an element be added to the min-height value instead of being included in it? For example you have 10px of padding on the top and bottom a element and a min-height of 150px the height should be 170px instead of the element's height being 130px + 20px of padding.
I'm currently building a site using Material Design Lite and it adds padding to almost everything so it's a bit of a pain to have to always find the padding on something when you want to set a min-height value.
I might be a little late, but setting box-sizing: content-box; on the element would solve the issue.
When I put width: 100% for my ul, its border flies off the edge of the page. I tried setting margin-right: 2px to see if that would make a difference, but to no avail. What I thought would happen is that the border would occupy the right edge of the screen, and setting the margin-right would bring it to the left, but this didn't work. Why does it behave this way?
<!doctype html>
<html>
<head>
<style>
#nav {
border: 1px solid black;
width: 100%;
margin-right: 2px;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Local</li>
<li>Weather</li>
<li>Sports</li>
<li>Politics</li>
</ul>
</body>
</html>
You can see the page here: http://www.noetherherenorthere.com/practice/2013-1-5-02.html.
Answers
Browsers use box-sizing: content-box; use border-box instead ~ setek
Choose a smaller percentage ~ Damien Black
Use width: auto ~ Josiah
This happens because the box is being generated using the content-box model: with an explicit width, and then add border and padding to it.
And uls have a left-padding by default, to account for the bullets.
Removing the left padding will stop this, but you won't be able to see the bullets anymore: you could always add a margin onto the lis to counteract this.
Alternatively, if you don't have to support older browsers (IE 6/7) you could use the property: box-sizing: border-box; which will cause the box to render by subtracting the padding and border from the explicit width, rather than adding to it like the content-box model.
EDIT: It's worth noting that IE 6 (and 7, I believe) will generate all boxes as if they were border-boxes anyway. This causes inconsistencies when you start setting widths and applying padding in those browsers vs. modern browsers.
Setting width to 100% does something a little odd in html, it makes the width 100% and the padding, border and margin will all appear outside of that full width.
You'll have to do less then 100% to leave room for the border and margin.
Using 100% will make the main box fill the whole screen, but padding and margin will be excluded. Instead of width: 100% use width: auto. That will make the box fit comfortably and takes into account margin and padding.
Fiddle: http://jsfiddle.net/kfWvr/
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/