I have found the following from the site: http://www.htmlgoodies.com/html5/tutorials/learn-css3-from-a-z-getting-started-with-layouts-.html#fbid=Byc3E58e8v-
"The CSS3 code for this is very simple. You just need to add the following property to switch the model for a particular element.
#W3C-model {
box-sizing: content-box;
}
#traditional-model {
box-sizing: border-box;
}
Having understood how box-sizing works, the next question is where can you use it? Well, its very useful when you have two equal columns. If you give them 50% width each and add some padding and maybe a border, the columns won't show up side by side. This is an ideal scenario where you can set box-sizing to border-box and happily set the width to 50% for both boxes."
I am not sure what is meant by the columns won't show up side by side? It sounds like what is expected here is the dividing border between the two columns would vanish or something like that - I am not sure. I have this sample code to experiment with:
http://jsfiddle.net/hE8UZ/
I am not seeing any effect at all. Besides not sure why the span elements didn't occupy 250px as width was mentioned as 50% of body.
Please help.
Thanks
If you have any container with 500px width and child with 1px border, 10px padding, 100% width and set box-sizing to border-box then the width will be 500px if you set box-sizing to content box then the width will be 500px + 2x10px + 2x1px = 522px.
.container {
display: block;
width: 500px;
}
.one {
display: block;
padding: 10px;
-webkit-box-sizing: border-box;
width: 50%;
border: 1px solid;
}
.two {
display: block;
padding: 10px;
-webkit-box-sizing: content-box;
width: 50%;
border: 1px solid;
}
http://jsfiddle.net/Vaj5x/
EDIT:
If you wanna have tow columns add them float to left. Like here http://codepen.io/Chovanec/pen/cuBpg
Related
I’ve got a <div> with padding. I‘ve set it to height: 0, and given it overflow: hidden and box-sizing: border-box.
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0;
overflow: hidden;
padding: 40px;
background: red;
color: white;
}
<div>Hello!</div>
As I understand, this should make the <div> disappear.
However, it’s still visible (in Chrome 31 and Firefox 25 on my Mac). The height declaration doesn’t appear to be applying to the padding, despite the box-sizing declaration.
Is this expected behaviour? If so, why? The MDN page on box-sizing doesn’t seem to mention this issue.
Nor, as far as I can tell, does the spec — it reads to me like both width and height should include padding when box-sizing: border-box (or indeed padding-box) are set.
The exact definition of border-box is:
That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.
So you can modify the height and width properties, but padding and border never change.
As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.
Then, if height is 0, you can't make the padding be inside, because that implies the height will be negative.
The declaration of height: 0; is applied. If you leave it at height: auto;, you would see a 20px difference (the height of the line with "Hello!"), making it a total 100px high. With height set to zero, it's only 80px high: padding-top + padding-bottom = 80px
So the answer is: Yes, it's expected behavior.
You could set width and height to any value between 0 and 80px (if you have 40px of padding) and still get the same dimensions.
Update: As Hardy mentioned, using an additional wrapper div gets around this issue.
Demo
HTML:
<div class="div-1">
<div class="div-2">
Hello!
</div>
</div>
CSS:
.div-1 {
padding: 40px;
/* This is not visible! */
border: 1px solid tomato;
}
.div-2 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0px;
width: 0px;
background: red;
color: white;
overflow: hidden;
}
I'm trying to align five horizontal menu elements with 'float:left' next to each other inside a container that spans 80% of the screen and a minimum of 960px. For this, I had initially set their min-width to 192px (960/5) and their width to 20%, but quickly realized this does not play well with adding 1px borders, causing one of the buttons to be 'thrown overboard'.
Changing the widths to 19.895333% and 191px, respectively, solved the issue, however this is clearly a hacky solution which also leaves an ugly space of 2-3 pixels at the right side of the menu.
Is there a more elegant way to align these elements and account for the bonus width added by borders, padding etc? I have tried 'overflow:hidden' to simply hide whatever may poke outside the container, but this just hides the entire 5th button.
A picture to illustrate the result:
The html code:
<div class="menucontainer">
<div class="menutab" id="menutab_first">News</div>
<div class="menutab">Game Guide</div>
<div class="menutab">Articles</div>
<div class="menutab">Media</div>
<div class="menutab" id="menutab_last">Community</div>
</div>
The css code:
.menucontainer {
height: 26px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-style: solid;
border-color: #303030 #101010 #000 #101010;
border-radius: 0px 0px 8px 8px;
}
.menutab {
line-height: 26px;
float: left;
width: 19.895333%;
text-align: center;
min-width: 191px;
border-right: 1px solid #202020;
background-image: url('../img/menubutton2.png');
background-size: 100% 100%;
font-family: 'Cabin', sans-serif;
}
#menutab_first {
border-radius: 0px 0px 0px 8px;
}
#menutab_last {
border-right: 0px;
width: 20%;
min-width: 192px;
border-radius: 0px 0px 8px 0px;
}
Thank you in advance!
For this you can make use of the box-sizing property to set your borders to appear within your elements rather than outside of them:
elem {
-webkit-box-sizing: border-box; /* Some mobile browsers. */
-moz-box-sizing: border-box; /* Firefox. */
box-sizing: border-box; /* All other browsers IE8+. */
}
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. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.
So in the case of your CSS:
.menutab {
...
width: 20%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
...
}
What you need is box-sizing:border-box;
This CSS property will change the box model for the element such that the border is included inside the width, rather than outside of it as with the standard box model.
This means that your boxes will then be 20% of the width of the page, rather than 20% + the width of the borders.
Problem solved.
box-sizing: border-box causes the width of the borders to be counted as part of the 20%. That's the best solution but if that will interfere with your layout in some way, an alternative is use calc to subtract the borders from the 20%, e.g. width: calc(20% - 2px);
I have an issue when using box-sizing:border-box on a fluid grid I have built. I have 1 main column and then a secondary column that contains 2 grid items. If I add border-bottom: 2px solid grey to the first grid item in the secondary column box-sizing is ignored which makes the grid look off as the second column is now slightly taller that the main one. Can anyone advise how I can make these look even, I understand that this is probably because I havent set heights but I'm not sure how to work round this?
Here is my JS Fiddle http://jsfiddle.net/97qpV/
CSS
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.featured-news-col {
width: 66.66667%;
float: left;
margin-right: 0%;
display: inline;
border-right: 2px solid grey;
}
.m-news-thumb {
position: relative;
display: block;
}
.sub-article{
border-bottom: 2px solid grey;
}
.sub-article:last-child{
border:none;
}
img {
display: block;
height: auto;
max-width: 100%;
min-width: 100%;
}
.additional-news-col {
width: 33.33333%;
float: right;
}
You'll need to set heights if you want them to be the same height. HTML elements will, by default "shrink-wrap" their contents, and be only as tall as the contents.
box-sizing doesn't change this. What it does change is how height and width are determined when things like margins, paddings, and borders are added.
So, for example, if you have a div with the following:
div {
height: 50px;
width: 50px;
border: 5px solid black;
}
With the default box-sizing (content-box), the calculated size of that div would actually be 60x60px (the height/width, plus the size of the border on both sides). However, with box-sizing: border-box, that border is now counted as part of the box size, making its calculated dimensions 50x50px.
Jeff Kaufman has a good demonstration of how box-sizing works, and why border-box makes more sense.
The boxes only line up when the contents match the ratio 3:2 (eg those 600x400 dummy images). By adding borders the boxes no longer fit that ratio.
I don't think there is any way to make this work with CSS borders. If the final content will be images I suggest making the borders part of the image. Then they will always line up at any size.
You can see an example here:
http://users.telenet.be/prullen/portfolio_test.html
I have set a padding of 100px (all directions) to the portfolio_item class (3 items on that page). The top, bottom, and left paddings are applied. But the right padding doesn't seem to work; the text extends beyond the boundary of the div.
.portfolio_item {
width: 100%;
clear: both;
display: inline-block;
padding: 100px;
}
I have tried changing the div to a float:left instead of display:inline-block but that didn't help.
Ideas are appreciated.
Thank you,
Wesley
Applying box-sizing: border-box; on your .portfolio_item should fix the issue. You'll have to include some specific vendor prefixes for this to work on all modern browsers:
.portfolio_item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Little demo: little link.
More than one parent element (.out anb .in) has overflow: hidden; applied. The overall container is set to a width of 800 pixel and thus the right side of the content is hidden. The padding itself works – you just don't see it in your current setup.
<div style="width:800px; border:2px dashed red;">
<div class="out">
<div class="in">
<!-- … -->
You set the width of the inside to 100%, but with the padding the width is actually 100% + 200px. I would recommend changing
width: 100%;
To
width: 600px;
Or changing the padding to a percent like:
width: 80%;
padding: 10%;
Instead of applying the padding to the div, target the text specifically. Place the text in a 'p' tag and call it in the CSS.
.portfolio_item p{
padding: 100px;
}
you can give like this,
.portfolio_item {
clear: both;
display: inline-block;
padding: 100px;
width: 87%;
}
I think I might already know the answer to this one but I need a sanity check!
Say I have
#gridtest{
width:590px;
}
I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:
#gridtestpercent{
width:59%; /*590/1000*/
}
If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do
#gridtest{
width:570px;
border:10px solid red;
}
I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.
#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}
I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet.
If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?
Cheers!
You could use CSS3 calc() function,
.selector{
border: 5px solid black;
width: -moz-calc(50% - 10px);
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
}
SASS mixin
#mixin calc($property, $expression) {
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
article {
border: 1px solid red;
#include calc( width, '100% - 2px')
}
You could use an inset box-shadow instead of a border:
box-shadow: 0px 0px 0px 10px red inset;
Just pad the inside of the container to compensate.
Edit: I write "pad" but of course if you use padding it'll throw off the box dimensions. Margin the content inside instead.
The accepted answer is not correct. You actually have 2 options:
Use the box-sizing property, so all the paddings and borders are considered part of the size:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
border: 2px solid black;
padding: 15px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Or, use the outline property instead of the border property. You will still have problems with the paddings, but it's easier to add. Example:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
outline: 2px solid black;
}
Full explanation: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
Unfortunately, yes, you're out of luck. One hacky way to get around this problem is with a wrapper div that you use to create your border. So the outside div would be 57% (in your example) with a background that is the color of your desired border. Then, the inner div would have a width of 96% or so (play with the exact number to find a border that is appropriate for your design).
If you want to stay semantic you can use div { box-sizing:border-box; } or some absolutely positioned :after elements. See the post How do I add 1px border to a div whose width is a percentage?
In CSS3 you can also use the new box-sizing property to include the pixel and padding count into the width of the element:
box-sizing: border-box;
If possible, depending on your design, what I like to do is put the border as an absolute div with a width of 3px ( for example ) and a height higher than its parent div. I then set overflow hidden on the parent div.