I'm using Twitter Bootstrap for my page layout and I want to insert a CSS3 Box Shadow in a column.
The only problem I'm having is that the box shadow has a 1px border, and this is enough to cause my second column to wrap to the next line. If I remove the border it aligns up fine.
If I subtract 2px from the column width, it looks exactly how I want. However, I'd like to take advantage of Bootstrap's fluid layout (which is based on percent rather than pixels), so there's no easy way to simply make the <div> 2 pixels narrower than whatever it would otherwise be.
I really dislike the way that borders do not stay within an item's width. Does anyone see a way to have my <div> respect the current width even with borders?
Use
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
and the border's width will be added inside the box.
Here is an example with two divs that have 100x100 sizes and 20px border. The first one has 'box-sizing', the second one has not : http://jsfiddle.net/y3zxC/ .
Related
I1m currently working on a personal website but I have no experience with web development so I got stuck at a functionality that probably has a very simple solution. I have many of this div on my page and I just wanted the greyed background to:
Expand just a few pixels beyond the content of the div
Have rounded borders
I'm currently using
background-color: #ffffffab;
background-clip: content-box
to get the results shown, but either I paint ALL of the div, which is not what I intend to do or I leave it as it is shown in the picture. When using "border-radius" I have to increase to huge numbers like 80% to get rounded edges, and even so it cuts some part of the text. Is there an easy way to do what I'm trying to do? I'm also including this picture with the margins (orange) and padding (green).
Thanks!
Following #tacoshy suggestion:
I added more margin to the top and bottom of the container and increased the padding on the sides, this way I wouldn't need to use the content-box function: margin: 2em auto 2em; padding: 2em.
That solved it.
Thanks!
I found a new style today while taking a class on Responsive Web Design, and then I looked up w3schools example and I'm slightly confused.
If I create a div of 200px by 200px and apply a 1px border around it, the element in total changes to 202px by 202px in theory.
But if I then apply border-box, it remains at 200 by 200 with the border and the actual content box is now technically 198px by 198px.
Just want to make sure that is what actually happens.
Using the example from w3schools, you can see that .div4's content doesnt seem to align properly however, why is that?
When you apply box-sizing: border-box; and make a specific width, that width is the max width of your div, including border, padding (for padding is that you see in .div4), etc.
That great for responsive design because it help you to calculate width for adapt your design.
So I was coding using Semantic-ui, and I have two toggle boxes (check boxes) next to each other in a flexbox container. When the window size is reduced, they wrap around so that one is on top of the other.
To get them to spread out a little, I added both right and bottom padding of around 5px. However I noticed a strange behaviour. Padding would cause the boxes to move apart horizontally, but when stacked vertically there was no space between them, even though there was bottom padding on each box.
Further investigation showed that the box-sizing property of the check boxes was set to border-box. After reading up, I found that the border-box box model calculates the width and height to include the padding and the border.
The checkboxes have a height of 1.5rem assigned.
My question is as follows. As is my understanding, padding shouldn't change the size of the element when using border-box. However this only seems to be true if definite dimensions are set as shown in the linked jsfiddle. Height is set, so the bottom padding isn't added on as an extra. But width isn't and right padding has an effect on the visible width of the divs.
Why is this the case? Surely padding should have no effect on the size of the element (unless set to something ridiculous, larger than the element itself), irrespective on whether I've defined a definite width or left it to be calculated?
JSFiddle: http://jsfiddle.net/Astridax/8cd48emn/
Please try and toggle the paddings using dev tools to see what I mean.
As is my understanding, padding shouldn't change the size of the element when using border-box.
This is where you're confused. Here's what the spec has to say on this subject: http://www.w3.org/TR/css3-ui/#box-sizing0
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. As the content width and height cannot be negative
([CSS21], section 10.2), this computation is floored at 0.
The actual effect of setting box-sizing to border-box is that specified widths will be said to include the border and the padding. The spec says nothing about unspecified widths, which are therefore treated as normal - as wide as they need to be to incorporate both the content and the padding and the border.
Edit:
What you're implying should happen is actually impossible to do, for the following reason. Imagine you have content in a div such that the auto width of the content alone would be 500px exactly. Then throw a 20px padding around that.
#myDiv {
padding: 20px;
width: auto;
}
No problem yet - you have a 540px wide div with the box-sizing at content-box by default.
Okay, so lets change the box-sizing to border-box.
#myDiv {
box-sizing: border-box;
padding: 20px;
width: auto;
}
What you're suggesting should happen is that the padding should now be ignored. So we have a div with 500px worth of content, we're going to now include the padding within that 500px instead of extending the width of the div. But wait - now the content box has shrunk to 460px to allow for the padding and the overall size of the box is 500px. But wait, we're not supposed to be accounting for the padding when calculating the width, so we'd better render the div at 460px right?
You see the problem? You could go on infinitely like this.
I'm trying to create a fluid layout, so I used a width in %. I tested the site on Chrome, Safari and IE. When it worked fine in IE I thought my work was done, however when checking it in Firefox I realized the width was incorrect. EG: two 50% elements wouldn't fit in one line neither 3 elements with 33% width. This is an example from my site:
http://pranalog.com/example.php
How can I get this to work on Firefox (or on the most browsers)?
You have box-sizing: border-box; set on the div's, to set border-box in Firefox, add:
-moz-box-sizing: border-box;
to your style rule. This is needed to get box-sizing to work in Firefox, setting this property to border-box forces the browser to render the div's with the specified width and height, and places the border and padding inside the div's.
This in turn fixes your issue: with the border rendered on the outside of your div's, the total width of your elements is essentially 3 times 33.3% = 99.9% plus 6px needed to render the the six 1px wide borders on the right and on the left of each div. Since 6px is more than the 0.1% of the page width that is left, the last div doesn't fit on the same line anymore and moves down to the next line.
With the border rendered inside the div's by setting border-box properly, you won't have this issue.
Here's a fixed up jsFiddle
It's because you have a border of 1px, try removing the border value and all three fit side by side.
If you would like to keep the border then just reduce the width to around 32%
Good luck
<table>
<tr>
<th><img src="image.jpg" /></th>
<td>row1 column2</td>
<td>row1 column3</td>
<td>row1 column4</td>
</tr>
</table>
Results
If the height of the img is equal to 10px, the height of all cells in that row equals 10px.
Adding a border to the td's results in the td's looking taller then the img.
Note: the img is contained in a th because I do not want a border around the img, only the td's.
Desired Results
As displayed in the image above, the height of the td's should be adjustable so that their top and bottom borders can be aligned with the img.
Research
Using CSS to specify a height on the td's only works if the height is larger then the height of the img (in other words, the td's cannot be smaller then the img).
Additional research indicates that this is just the way tables work.
Generally speaking, in a table, the <td> elements are all the same size within a row, that is the purpose of the rows, you can align the cell contents within the row, but otherwise the row will have a consistent height. The height of the row defaults to the maximum height of any cell within it. Horizontal borders run with rows generally.
The only way to alter this really is to use rowspan with additional rows thrown in for positioning, but that is ugly in the extreme.
Do keep in mind that tables are for tabular data only, and should generally be avoided for other purposes, particularly layout.
I'm not sure I understand, you want border on the "inside" instead of the "outside"?
This is easily accomplished with CSS and divs, setting a negative margin equal to the border-width.
Is there a reason you're using tables?
You can use the following CSS properties to make the border-added boxes behave like Internet Explorer, in that the border width will be calculated into the box model size:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
source: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-did-internet-explorer-get-the-box-model-right/