I thought bootstrap 3 used box-sizing:border-box so when I tried to add a margin class to the 2 box-sizing:border-box they stack on top of each other instead of sitting next to each other from sm upwards in size.
<div class="blueBox col-sm-6">
<input type="checkbox">foo</input>
</div>
<div class="blueBox col-sm-6" >
<input type="checkbox">boo</input>
</div>
css
.blueBox {
background-color: #26a8e0;
color: white;
height: 100px;
margin: 20px;
box-sizing: border-box;
padding: 20px;
}
The box-sizing : border-box; property doesn't include margin in the size of the elements. It includes border width and paddding. That is why they don't stay inline.
border-box
The width and height properties include the padding and
border, but not the margin.[...]
source : MDN
To simulate margin, you can use border with the same colour as the background :
.blueBox {
background-color: #26a8e0;
color: white;
height: 100px;
border: 20px solid #fff;
box-sizing: border-box;
padding: 20px;
}
Related
How to remove this gap or merge the borders? Because the lengths are inconsistent
box1 and box2 are 100px, box3 is 200px but their lengths are inconsistent because border...
so how do their length are consistent?
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
This happens when you have elements that have display: inline or inline-block. Since the browser treats these elements the same way as text, a line-break will be treated as white-space.
Setting the font size to 0 for the wrapper basically eliminates the whitespace, but keep in mind, that this property will be inherited to child elements, so you may have to set the font-size back to >0 for children. Also, this may break layouts that use em as unit, so keep that in mind. By also adding box-sizing: border-box the gaps are gone.
main {
font-size: 0;
}
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
There is also a possible way to use comments to prevent the auto-formatting from adding the white-space / line-break. It does not look too elegant, but it gets the job done. Also, except for the box-sizing: border-box you don't need any additional CSS for this.
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div><!--
--><div class="shortBox">box2</div><!--
--><div class="longBox">box3</div>
</main>
The third way of solving this issue is to utilize flexbox. You can create layouts like this, without having to worry about gaps because of white-spaces or line-breaks.
watch this magic:
<main>
<div class="shortBox">box1</div><div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
Notice that first 2 divs are NOT divided with new line.
Then in CSS add this extra 2px like this:
.longBox {
width: 202px;
}
I'm trying to give a table a left margin, and set the width of the table plus its margin to 100% of the containing div.
Normally I'd do this with width: 100% and box-style: border-box, but this doesn't seem to be working on a table.
Here's my CSS:
table {
width: 100%;
margin-left: 2em;
border: 1px solid black;
box-sizing: border-box;
display: table; /* tried adding this but doesn't seem to help */
}
You can see the problem here in a JSFiddle: http://jsfiddle.net/7C66d/
I can see it in Chrome, Firefox and Safari.
I think you are confused, you use padding with border-box, not margin.
http://jsfiddle.net/7C66d/4/
HTML
<div id="wrapper">
<table>
<tbody>
<tr><td>why is this table</td><td>not border-box</td></tr>
</tbody>
</table>
</div>
CSS
#wrapper {
width: 100%;
padding-left: 2em;
box-sizing: border-box;
}
table {
width: 100%;
border: 1px solid black;
display: table;
}
If you don't want a wrapper, you can use display:block as it will set the width to 100% by default.
Code:
table {
margin-left: 2em;
border: 1px solid black;
display: block;
}
I would like my input field to be 98% of the width of the container it is in. The problem is that when I set it to 98% width the input goes off the screen. Is there a special way to define a width of an input or something?
Here is my HTML:
<div class="large-12 columns centered">
<input class="typeahead" type="text" placeholder="Start typing to search" spellcheck="false" autofocus />
</div>
And here is my CSS:
input {
padding: 0.8rem 0.9rem;
height: inherit;
font-size: 1.25rem;
margin: 0 0 .5rem 0;
display: block;
width: 98%;
}
But for some reason, this is the result:
Try providing box-sizing for the input, so that width and height of the input considers padding as well.
input {
padding: 0.8rem 0.9rem;
height: inherit;
font-size: 1.25rem;
margin: 0 0 .5rem 0;
display: block;
width: 98%;
box-sizing:border-box;
}
This happens because the final width of an element is calculated with width + padding + border, this is called box-sizing.
Adding the following CSS should fix it:
box-sizing: border-box;
Use box-sizing should work:
input {
width: percentage you want%;
box-sizing: border-box;
}
I have a footer in my webpage with some text in it. When i try to add padding-left property to it, the width of the footer expands over the enclosing parent div element and this problem only happens with Opera and not with Chrome or Firefox or IE.. What should be done to correct it ??
CSS for footer :
footer {
color: #FFFFFF;
background-color: #3399CC;
padding-top: 12px;
padding-bottom: 12px;
width: 100%;
float: left;
}
Instead of adding an extra block level element inside of your footer, you should try the CSS3 box-sizing property with value set to border-box. The following footer definition should probably solve the problem for you:
footer
{
color: #FFFFFF;
background-color: #3399CC;
padding-top: 12px;
padding-bottom: 12px;
width: 100%;
float: left;
box-sizing: border-box; /* prefix accordingly */
}
To read a short introduction, visit the following link: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
you can fix this problem by taking a div inside footer tag and apply padding to that div
<style>
footer {
color: #FFFFFF;
background-color: #3399CC;
width: 100%;
float: left;
}
.footer {
padding-top: 12px;
padding-bottom: 12px;
padding-left:10px;
}
</style>
<footer>
<div class="footer">hello this is footer</div>
</footer>
That's a common sense. If you add "padding" and "width of 100%" you will get that result. Remove the "padding" or the "width of 100%" you will notice the problem no longer exist.
Add div tag between the parent-of-footer and the footer, and add the padding-left to that new div, like this:
<div id="parentOfFooter" style="background-color: #00ff00;">
<div id="paddingLeftProblemSolver" style="background-color: #ff8800; padding-left:50px;">
<div id="myfooter" style="color: #FFFFFF; background-color: #3399CC; padding-top: 12px; padding-bottom: 12px; width: 100%; float: left;">
i'm a footer
</div>
</div>
</div>
<div class="row">
<div id="cover" class="span12"></div>
</div>
<div class="row">
<div id="first_left" class="span6 left">
<h3>aa</h3>
</div>
<div id="first_right" class="span5">
ee
</div>
</div>
And less:
#cover{
background: url('couv.jpg') no-repeat;
width: 960px;
height: 280px;
}
h3{
color: #212121;
font-size: 18px;
font-weight: normal;
float: left;
text-transform: uppercase;
margin: 0 0 25px 0;
text-shadow: 1px 2px 2px #FFF;
}
.left{
background: url('grille.jpg');
padding: 15px;
}
The "first_right" span displays below first_left, and only if the 15px padding is present. With padding 15, first_left becomes 490px wide instead of 460px. Why is that ?
Also, is it ok to have padding on a span if I want to nest some more rows in it ?
The default value for box-sizing is content-box. This does not include padding. The padding extends the width (if set) of the element. You need to set border-box to include the padding and borders in the element width.
.left{
background: url('grille.jpg');
padding: 15px;
box-sizing: border-box;
}
Now the width includes padding and borders.
Read more about box-sizing