I'd like to know what are Bootstrap 3 effects on height, when using percentages values.
Here's a simple html:
<body>
<div class="content">
<p>This is a div! </p>
</div>
</body>
and css:
body {
padding-top: 100px;
height: 400px;
background-color: lightblue;
border: 5px solid green;
}
.content {
border: 5px solid red;
height: 100%;
}
Without bootstrap, this is the result.
With bootstrap, the result changes to this instead.
So, here's my guess:
Without using bootstrap, height: 100% will look up to the parent of .content and look for its height. So in this case, .content will end with height: 400px. And since there's a 100px padding-top in body, body will have to grow 100px larger, ending with 500px, in order to match .content.
With bootstrap, height: 100% will try to fill the parent, instead of looking at its height, so since there's a 100px padding-top, .content will end with height: 300px and body remain at 400px height.
Is this correct?
How would I be able to replicate what bootstrap does, without using bootstrap?
Thanks in advance! ^-^
The size you see with Bootstrap is because it uses box-sizing: border-box, instead of the default value of content-box..
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
So, if don't want to use Bootstrap, but have the same sizing, just add the CSS to set the box-sizing to border-box.
Codeply Demo
Related
I've been experimenting with display:inline-block on div elements and I'm trying to work out why my two inner div elements are not displaying on the same line. Both divs are set to width of 200px and their parent div is set to 400px.
If I set the inner divs to float left instead of using inner-block it works as expected.
The code snippet is as below:
Note: that I've set box-sizing to border-box. So I assumed this would make both inner divs exactly 200px even with the 1px border.
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0
}
.container {
width: 400px;
}
.inner {
border: 1px solid black;
padding: 10px 0;
width: 200px;
display: inline-block;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
<div class="inner">Testing border box property</div>
<div class="inner">Second div</div>
</div>
You could remove the white space between inline-block elements by adding font-size:0px; to parent element (.container) then add font-size (e.g 16px) to child (.inner) elements.
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0
}
.container {
width: 400px;
font-size:0px;
}
.inner {
border: 1px solid black;
padding: 10px 0;
width: 200px;
display: inline-block;
font-size: 16px;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
<div class="inner">Testing border box property</div>
<div class="inner">Second div</div>
</div>
You need to remove unnecessary spaces between your HTML tags or reset font-size to 0.
check it here :
Fighting the Space Between Inline Block Elements
There is more solutions on the link above.
Plus you can use display:block; float:left instead.
The border. The border will add 2 pixels to each box, so the contents are actually 404 pixels, and it does not fit within the 400 pixels wide div.
There's not enough space in the container div. Change the container div to 404px to account for the left and right sides for each of the inner divs
This question already has answers here:
HTML width messed up by border
(2 answers)
Closed 8 years ago.
Based on answer from another question I tried to add a line border to a div placed inside an outer one.
However this causes the div to mess up Why?
Mark up
<div id="outer">
<div id="chart"></div>
<div id="table"></div>
</div>
CSS
#outer{
width: 1300px;
height: 640px;
border: 1px solid black;
}
#chart{
float:left;
width: 900px;
height: 100%;
left:0;
background-color: red;
}
#table{
float:right;
width: 400px;
height: 100%;
right:400;
background-color: yellow;
border: 1px solid back;
}
400px + 2 border edges = 402px. 402px + 900px = 1302px which is too wide for your 1300px container so the float drops down.
Simplest fix is to replace the border with an outline:
outline : 1px solid black;
That's because of the box model... box model considers the dimensions of the content are the ones defined by height and width in the CSS..
Now you put height: 100% that's for the content.. any borders added will be added to that..
The solution is to override the box model calculations for the element by:
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
This way height and width will include paddings and borders
Use this property in you css:
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
With this you can define certain elements to fit an area in a certain way.
More info: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
border and padding both add to the width and height of element. Decrease the height and width to keep the same total dimensions.
I have the following elements:
<body>
<div id="container">
<div id="sidebar1"></div>
<div id="content">
<h3>Lorem ipsum</h3>
<p>Whatnot.</p>
</div>
<div id="sidebar2"></div>
</div>
</body>
Following this style:
/* ~~ this fixed width container surrounds all other divs~~ */
#container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
width: 180px;
/*border: 2px solid black;*/
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
#content {
padding: 10px 0;
width: 600px;
float: left;
}
#sidebar2 {
float: left;
width: 180px;
/*border: 2px solid black;*/
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
I am trying to achieve this layout: http://jsfiddle.net/QnRe4/
But as soon as I un-comment the borders it turns into this: http://jsfiddle.net/FZxPQ/
** Solved **
The border width was added to each element's total width making them too wide to fit in the container. Removing 2x the border width from each column's width solves the problem: http://jsfiddle.net/FZxPQ/4/
CSS box-sizing to the rescue! This property
alters the default CSS box model used to calculate widths and heights of elements
The border-box value means that
the width and height properties include the padding and border
/* support Firefox, WebKit, Opera and IE8+ */
#container, #sidebar1, #sidebar2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
However, browser support is not 100% standardized.
As other answers have already mentioned the extra width which pushes the sidebars out of alignment is because the width calculation includes the border width. box-sizing simply tells the browser that an element with a given width/height should include any border and padding values into the final width/height calculations.
The problem is that when you add in the boarder, the size of the outer divs increased by 4, 2px on each size. So, your container needs to grow in size by 8px.
So change your container to:
#container {
width: 970px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
See: http://jsfiddle.net/QnRe4/13/
When you apply the borders, that goes outer the divs, so the sidebars will have 184px width which doesn't fits to the container. try addig width: 176px
http://jsfiddle.net/QnRe4/12/
#sidebar1 {
float: left;
width: 176px;
border: 2px solid black;
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
Like this? http://jsfiddle.net/QnRe4/3/
What's happening is that your elements are losing their block display properties when you remove the borders.
So, adding display: block to those elements resolves that.
I've also adjusted your element's widths by 4px in width to retain the layout, since removing those borders essentially reduces the space that those elements occupy on-page.
So I'm trying to build a pure CSS responsive square (well actually I'm trying to build a circle but that's easy once I've got the square.)
In other words:
I want a div that has a height that is a percentage of the body and a width that is equal to that (or vice versa).
The div also needs to have another div inside it which can contain content and overflow: auto.
Lastly, the div can never exceed the height (or width) of the body or viewport.
So far, I have got some solutions working partially (i.e. in portrait but not landscape) using a 1px transparent .gif as an img to fill out a wrapper div. Not ideal semantics but I don't see how this can be done without it.
<div class="wrap">
<img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
<main>
<div class="content">
<h2>Title</h2>
<p> Lorem... etc. </p>
</div>
</main>
</div>
Here are my CSS solutions and what is wrong with them:
This works except it exceeds the height of the body in landscape (max-height in any of the elements does not solve this):
.wrap {
background: blue;
margin: 10% auto;
width: 70%;
position:relative;
text-align:center;
}
.wrap img {
border: 1px solid black;
height: auto;
width: 100%;
}
main {
background: red;
display: block;
border-radius:50%;
height: 100%;
width: 100%;
position: absolute;
top:0
}
main div {
background: green;
overflow: auto;
display:inline-block;
height:70%;
width: 70%;
margin-top:15%;
}
Codepen
Next I added a landscape media query to swap around the height and width values. Same problem.
#media(orientation:landscape) {
.wrap {
margin: auto 10%;
height: 70%;
width: auto;
}
}
Codepen
At this point I started looking into .wrap's parent elements , namely the body and html. (Resource on the difference between them.) I added height and max-height: 100% to both of them, but no joy. I've also tried adding another div container as I thought it might be easier to control the height, but that doesn't seem to be doing much either.
And now I'm pretty much out of options. I'm fairly sure the solution is something to do with the html and body elements and the way they are so eager to expand vertically but I'm not really sure how else to stop them doing so.
Any help much appreciated.
You can use vw, vh and vmin to scale the square:
Demo: http://jsfiddle.net/r9VQs/
CSS (changed part only):
.wrap {
background: blue;
margin: 0 auto;
max-width: 90vh;
max-height: 90vh;
position:relative;
text-align:center;
}
You can also use vmin (which gives better results but is less well supported) and forego the image:
Demo: http://jsfiddle.net/r9VQs/2/
CSS:
.wrap {
background: blue;
margin: 0 auto;
width: 90vmin;
height: 90vmin;
position:relative;
text-align:center;
}
vh, vw and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).
Please see http://caniuse.com/#feat=viewport-units for browser support.
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%;
}