It's been a while since I really dealt with percentages in web design. I have a nested DIV which sits inside a container but the padding of the container pushes it beyond the 100% width. Without wishing to embark on a process of trial and error to see what makes it as close to 100% of the width as possible, how do I go about achieving a snug fit? I also noticed that when I resized the window and made the space smaller, the right hand padding simply got smaller.
<div id="block">
<div class="inside">ssdfsdfdfsfdf</div>
</div>
#block {
width: 100%;
background-color: #CCC;
padding: 20px;
}
.inside {
height: 200px;
background-color: #333;
}
http://jsfiddle.net/AndyMP/cs2U9/4/
Use box-sizing css property for #block element.
#block {
width: 100%;
background-color: #CCC;
padding: 20px;
-o-box-sizing: border-box; /* Opera */
-ms-box-sizing: border-box; /* IE */
-moz-box-sizing: border-box; /* Mozilla */
-webkit-box-sizing: border-box; /* Chrome, Safari */
box-sizing: border-box;
}
About CSS box-sizing property: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I needed an
overflow: hidden
on the container DIV in order to get it to sit perfectly.
http://jsfiddle.net/AndyMP/cs2U9/6/
Related
I created a quick simple html doc to practice floats thinking, with such an easy example that it would work straight away. but something weird happened.
I just wanted to float 2 divs next to each other with equal width and size. I used the exact same tagging and words to make it completely easy to see how it was working. However, somehow #content had padding above the title whereas #content1 had none and it made the "boxes" way out of sync. However, when I added a padding of only 0.1px to #content1 they both fall in line together and have the exact same amount of padding? I just don't seem to be grasping even the most basic concepts...Here is the code I used anyway -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Float</title>
<style>
p {
padding: 0;
margin: 0;
}
#content {
float: left;
width: 50%;
background-color: grey;
}
#content1 {
padding-top: 0.1px;
margin-left: 50%;
width: 50%;
background-color: grey;
}
</style>
</head>
<body>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
<div id="content1">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
</body>
</html>
Keep in mind that HTML Elements have some default styles like padding or margin, which affect your element's total width. You can easily change those with the css using *, which will affect all the elements in your document.
* {
padding: 0;
margin: 0;
border: none;
/*
etc., you can add here whatever you need to be a global style
and rewrite some things afterwards in the specific classes, ids, ...
*/
}
If you're floating the blocks, you need to think about the total of the elements, so not only about the width property, but also about thier padding, margin and border. If the summarised (total) width of elements you're floating is bigger than their parent's width they will not be floated.
So, in your exercise it would look like this:
*, p {
padding: 0;
margin: 0;
}
#content {
float: left;
width: 50%;
background-color: grey;
}
#content1 {
/*
padding-top: 0.1px; - this is unnecessary
margin-left: 50%;
this margin makes the element 100% wide
(50% width + 50% margin-left), so it will not be floated to the
#content in your code as they would have the 150% of total width
and it's 50% more than the parent's width
(of course, parent's width is always 100%)
*/
width: 50%;
background-color: grey;
float: left;
}
I fully understand your problem. Why it’s not working? Your problem is clearly understanding the CSS box-model. Floting CSS depend on parent element box modeling. Your main problem is box-model not display, position and float.
How box-model work?
CSS box-model is rectangular boxes. box-model are describes the content of the space an element. Every box has four edges: The margin edge, border edge, padding edge and content edge. The content area is real content of the element. It has a background, a color or an image, text etc. And it’s located inside the content edge. its dimensions are the content width, or content-box width, and the content height, or content-box height.
CSS box-model used box-sizing property.
box-sizing global value:
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
box-sizing keyword value:
box-sizing: content-box;
box-sizing: border-box;
box-sizing: padding-box; /* Only Firefox implemented this value, and it was removed in Firefox 50. */
content-box:
If a box width: 450px. Then you apply border: 5px solid red;. Result box width: 460px;.
*{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.content-box{
background-color: green;
height: 150px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
width: 450px;
}
.with-border{
border: 5px solid #121212;
}
<div class="content-box">Without border</div>
<div class="content-box with-border">With border</div>
border-box:
If a box width: 450px. Then you apply border: 5px solid red;. Result box width: 450px;.
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.border-box{
background-color: green;
height: 150px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
width: 450px;
}
.with-border{
border: 5px solid #121212;
}
<div class="border-box">Without border</div>
<div class="border-box with-border">Width border</div>
Syntax & Uses:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
or
*{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
You can use it with any class or any ID.
If you clear understand the the box-model then you will understand the display, position and floating.
I am dividing my screen to 4 Quarters but it doesn't work with all screen resolutions.I need it to always be 4quarters even by changing the window size.
here is the code:
body{
height:800px;
}
div{
position:relative;
border:1px solid red;
width:49.7%;
height:49.7%;
}
#Q1,#Q3{
float:left;
}
#Q2,#Q4{
float:right;
}
</style>
</head>
<body>
<div id="Q1"> </div>
<div id="Q2"> </div>
<div id="Q3"> </div>
<div id="Q4"> </div>
</body>
Use this CSS to make the height 100% and quarter it:
body{
height:100%;
}
html {
height: 100%;
}
div{
position:relative;
border:1px solid red;
width: 50%;
height: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#Q1,#Q3{
float:left;
}
#Q2,#Q4{
float:right;
}
The computed width of the boxes exceeds the total available space in lower screens. This is because the border of 1px around the elements.
You could give the div elements a box-sizing: border-box; declaration so that their width would be calculated including padding and borders.
Example Here
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
In addition, if you want to resize the height of the boxes with the respect to the height of the body, note to set height: 100% on body and html as well.
You have to specify the height of html to get height: 100% to work for the <body>. This because a percentage value of height property is relative to the height of box's containing block.
Updated Example Here
html, body {
height: 100%;
padding : 0;
margin : 0; /* Remove the default 8px margin around the body */
}
Also note that UAs apply a default margin to the <body> by default. Make sure you have reset the user agent stylesheet.
I just wondering is there any way that could make max-width become fixed when padding left and right is being added?
Here my css:
#editorBody {
overflow: auto;
margin: auto;
padding: 15px 40px 10px 40px;
max-width: 816px;
}
I would like the width is 816px, but actually it is 736 (816-50).
You are going to want to add the css rule box-sizing: border-box;
According to Caniuse there may be a need for prefixing...
CSS
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
Check out this page for a comprehensive look at box-sizing
When i make a div that has a width of 100%
and inside that div i place another div with a width of 90%, that has a padding of 5% (100% in total) it creates a border on the right hand side of the screen.
So far this 'bug' is only on the iPad (1 and first retina). Not on desktop. And not on mobile Android.
When i remove
<meta name="viewport" content="width=device-width" />
or any equivalent of the viewport I don't have that problem. But of course it has to be there.
Is this normal behaviour? Or have I stumbled upon some kind of bug?
On the website I use Eric's Meyer's css reset,
on the fiddle i use the * {margin / padding} reset. If that has to do anything with it
I thank you for your help! :)
http://jsfiddle.net/Empi/h7ck6/
http://migueldebruyne.be/test/
You could apply box-sizing: border-box; and width: 100%; to inner div
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container {
width: 100%; height: 100%;
background-color: red;
}
#aDiv {
width: 100%;
padding: 5%;
background-color: blue;
}
An example : http://jsfiddle.net/h7ck6/2/
I can't test this in your demo site but in jsfiddle seems to work on ipad
I have 2 DIVs next to each other (A to the left and B to the right) within a container of 980px wide. I set a width of 50% for both A and B which works great.
Question: I'd like to add some padding-right to DIV A so that the text in it doesn't touch the text of div B. If I do that I need to adjust the % of the DIV (i.e. to 48%). Is there a way to avoid that? (i.e. get the % automatically adjusted based on the padding)
yeah, you can use the box-sizing property. By setting:
box-sizing: border-box;
The width property will set the total width (including borders and padding), so for example a div with:
div {
width:500px;
padding: 20px;
border: 10px solid blue;
box-sizing: border-box;
}
would have a visual overall width of 500px, rather than a default width of 500 + 40 + 20 = 560px.
For reference: http://css-tricks.com/box-sizing/
You can do it by using one more wrapping div:
<div class="wrapper">
<div class="inner">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
.wrapper { width: 960px; }
.inner { padding: 1em; }
.left, .right { width: 50%; float: left; }
Or use box-sizing that makes calulations very easy.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
It changes the rendering of paddings and border so that they are included in the width rather than added to it.
If you would like to add padding without reducing the width of the div, you can use: box-sizing: border-box; More info
e.g.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
This will make your div the desired width (50%), and the padding will be subtracted rather than added to the div. Beware this is a CSS3 property and won't work in all versions of IE:
http://caniuse.com/css3-boxsizing
HTML
<div class="tbl">
<div class="row">
<div class="cell">A</div>
<div class="cell">B</div>
</div>
</div>
CSS:
.tbl{
display:table;
border-spacing:5px;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
width:50%;
}
for width, margin & padding values use % or em values
Have a look at this code
.container {
max-width: 980px;
}
section {
float: left;
margin: 0.0122448; /* 10px ÷ 980px */
width: 0.479591; /* 470px ÷ 660px */
}
aside {
float: right;
margin: 0.0122448; /* 10px ÷ 980px */
width: 0.479591; /* 470px ÷ 980px */
}
for complete tutorial on responsive design -
http://learn.shayhowe.com/advanced-html-css/responsive-web-design
You can apply box-sizing:border-box to the divs with padding.
-moz-box-sizing: border-box;
box-sizing: border-box;
Live demo
From MDN:
border-box:
The width and height properties include the padding and border, but not the margin.
box-sizing is supported all the way back to IE8.
You have to use box-sizing:border-box; beacuse using border-box; will give you a look of box with border & it will manage space for border by itself . you can give width and color of your border by yourself border:2px solid black; . And thus, the content of your both divs can be diffrentiated.