When we use border it apply outside of element. If I create div of 100px width and add 10px border than its overall with will be 120px and that's why layout will be not good since this extra unwanted width due to width cause problem in float and fluid layout
to solve this problem If I want to create 100px div with 10px border I create div of 80px and than 10px border so its total width will be 100 however its not I want since if I just want to change size in border or div I need to change both
it there any way I can create div 100 px and apply 10px border and overall width will be 100px ?
There is. You can use box-sizing: border-box on the element and the width (and height) will be calculated the way IE did it in quirksmode.
It can be extremely useful sometimes, but imo it's good to learn how the normal box model works and get used to working with it first.
Fwiw I've built a site using box-sizing: border-box as default on all elements and I would actually not recommend it. Partly because I'm really used to the normal box-model but mostly because there are still bugs with box-sizing in some browser (FF and percentages I remember messing up).
Edit: Note that it doesn't work in IE<8.
Edit2: More here: http://paulirish.com/2012/box-sizing-border-box-ftw/
This is classically solved this way with a CSS2 / IE5,5/6 compat solution by putting two divs inside each other:
<div class="size">
<div class="border">
Give me some border ;)
</div>
</div>
In the CSS you make use of the size-div to set the size and the border-div to set the border:
.size {width:200px; height:200px;}
.border {border:10px solid blue;}
So even if you only know the standard box-model you can solve this.
See http://jsfiddle.net/6K2vS/ for an online demo of this.
In some really old browsers you sometimes even need to set a zero-width border to the outer element to have this working. Just noting if you look for some backwards compatible solution.
Related
Let's say the width of the containing box is 5cm, padding(all sides) is 2cm.
if I set the width of the content to be 50%. Now the absolute value of the width would be 2.5 cm. But if the padding effect is still there, then the box now would be 2+2.5+2 = 6.5cm. But the content would no longer be 50% of width now(2.5/6.5 != 50%).
I'm kinda confused,any help? Thanks!
Look into the Box Model to understand how this currently works.
It does vary significantly between some browsers (especially older ones).
Not as big a problem as it used to be, but the solution to use box-sizing may not be a universal fix depending on your users (any hold-outs still on IE >8?).
As stated by others you can use the box-sizing property to fit either to the content alone, content with padding, or the entire box w/padding & border (which is probably what you want).
The result is correct. To simplify these calculations you could use box-sizing: border-box to include padding in total width.
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer
when the document is in Quirks mode. Note: Padding & border will be
inside of the box e.g. IF .box {width: 350px}; THEN you apply {border:
10px solid black;} RESULT {rendered in the browser} .box {width:
350px;}
Reference: MDN - box-sizing
This is a common problem devs come across.
If I have:
<div style="width: 200px"></div>
Then the width will be 200px wide.
If I add 10px padding, then I need to deduct 20px total from the width.
So to keep it 200px wide it must now be:
<div style="width: 180px; padding: 10px"></div>
It is possible to override this so the width doesn't need to be adjusted according to padding, but I feel you should stay true to CSS's intended way of working.
With does not override padding, the padding is added to the width.
Think of padding as extra width but outside of the element.
The width will not override the padding but the padding will still be
there so other elements will be pushed away from their position (if
relative).
Edit: Confused padding with margin.
I have a div with 1-pixel-border and height:29%. Chrome for some reason renders it without the bottom border.
See http://jsfiddle.net/9WVuC/4/
This issue depends on the actual percentage value and container size; when I change them, border sometimes appears and sometimes disappears. Seems that there is some rounding error in Chrome rendering engine when it's calculating actual div's height. Also, it occurs only if overflow and position are specified for that div.
Is it a known bug and maybe some workaround exists? Of course I can get rid of that percentage values by recalculating height manually and setting it with JS, but it's not very elegant solution.
this is because of the overflow:hidden; style you have on the div, the border actually appears outside of the div in question, so according to the height of the div (with it being a %) it doesn't take this border into account.
Looking at your code i would recommend moving your overflow:hidden; to the containing element of the divs (the td) that fixes the problem and will have the same effect on the content of the class="lower" element if it overflows.
You can fix this "bug" by setting height to height: 28.95%;
Make sure you do not use tables for layout. They should only be used for tabular data.
decrease the height or remove overflow: hidden
lower{
height: 28%;
position: relative;
overflow: hidden;
border: solid 1px black;
}
Fiddle demo
This is probably a rendering issue depending on screen/window size and the element's computed size (with decimals). A workaround for me was to put an invisible box-shadow where the border is missing and it fixes the rendering. For the bottom border it would look like this:
box-shadow: 0 1px 0 0 rgba(255,255,255,0);
code: http://jsfiddle.net/xVCrn/1/
(works best in chrome / webkit)
I'm trying to get the red part to have 1px of margin inside the dark buttony area. but I can't seem to change the height of the red part. =(
the goal:
If using display-inline you can set it's height. You will also want to set the line-height as well. For example I added line-height:17px; and it centered it pretty good.
Example: jsFiddle Example
Tip: For webkit browsers on elements with a border of 1px and border-radius. Use 1px double #color It'll help with the jagged lines. I believe this is mostly a problem in Chrome that hasn't been resolved.
Adding display: inline-block; to the red part lets you control its height.
Here's an example (with some padding added to make it look nice): http://jsfiddle.net/xVCrn/
The following example is identical in almost all browsers including IE6:
http://jsbin.com/adica3
#one {border : 1px solid red;padding:20px}
#two {border : 1px solid yellow}
p {border: 1px solid blue;}
.marg {margin: 0;padding: 0}
.padd {margin: 20px}
</style>
</head>
<body>
<div id="one">
<p class="marg">Padding to div</p>
</div>
<div id="two">
<p class="padd">margin tp P</p>
</div>
But when I give width to div then second div becomes shorter then first div.
How we should decide which is appropriate?
What browser compatibility issues should I know about?
Margins are on the exterior, paddings on the interior relative to the border. So obviously if you have something like a background image and text, and you want the text to have space between the edge of the bg image you'd use padding. Same thing with borders.
If you wanted space on the outside in addition to space between the border/bg images then you'd use margins.
If you're not doing anything remotely design-complex then it shouldn't really matter, but one thing you should look out for is margin collapsing, if you have elements coming before/after with vertical margins and you specify margins the values will collapse, sometimes you'd use padding to navigate around that.
If you give #one and #two a width of 200px, #one will take up 240 pixels without counting the horizontal borders, since it has 20px of padding horizontally.
IE5's rendering engine and quirks mode IE6/IE7 incorrectly draw the correct amount of space if you specify horizontal padding and a width, width:100px; padding:20px; would force the box to actually take up 100 pixels of width, instead of actually being 140 pixels as it should correctly be.
Another bug to note is the double margin bug; if you have a floated element and a margin that's in the same exact direction as the float, eg float:left;margin-left:100px; it accidentally doubles up. This is fixed by adding display:inline; which forces it to just have 100px instead of 200px to the left.
I notice that you ask a lot of questions which would be answered by simply reading a decent front end book - have you considered reading:
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_3?ie=UTF8&s=books&qid=1263529151&sr=8-3
http://www.amazon.com/Build-Your-Website-Right-Using/dp/0980455278/ref=sr_1_13?ie=UTF8&s=books&qid=1263529151&sr=8-13
http://www.amazon.com/Beginning-CSS-Web-Development-Professional/dp/1590596897/ref=sr_1_12?ie=UTF8&s=books&qid=1263529151&sr=8-12
Those would probably answer a lot of your questions...
I'd make the decision based on what's going to be inside your tags.
For example, is the <p> the only thing that's going to appear inside your div? If so, then it probably doesn't matter.
If there are other elements that will be inside the div, do you want padding around them or not?
As for the modified width, that will probably be due to the different boxing models between browsers.
i think the easy way is thinking the border of the element.
margin spaces outside border, while padding inside.
Of course, there are some browser related issue made them difference in some way, but i suggest stay with my suggestion and find work around on those special browsers.
I'm not saying that I'm lazy to do math, but is there a better way to perform this task:
I have a page that with width: 960px, inside it has 2 divs that are width: 50%. That's quite simple, but if I want to add 1px border I have to calculate 960/0.5 minus the extra pixels of the borders, they should be 4px but strangely they are counted as 2px (left and right side of 2 divs right?). Also, when I add margin and padding I have to calculate everything again. Lets say I add 10px margin, I have to convert the % to px and sometimes it gives me annoying numbers like 760.25px. I would like to know if you are using a better approach or if its unnecessary to do it like this. Thanks.
If you use fixed width of the container, why would you use % for inner DIV's. It does not make any sense unless you use percents. Sure you can use box-sizing, but it will hurt older browsers.
You can add more elements for sizing:
<div style="width:960px;overflow:hidden;">
<div style="float:left;width:50%;">
<div style="margin:5px;border:1px solid #000;padding:5px;"></div>
</div>
<div style="float:left;width:50%;">
<div style="margin:5px;border:1px solid #000;padding:5px;"></div>
</div>
</div>
You can use percentages for element with no margin, border or padding, and you can use margin, border and padding on the elements inside that has auto width.
box-sizing CSS property (if you dont care about IE<8)
If your "divs" have a background image, you can hack by integrate the border in the background image.
But if your "divs" have a fixed width, you should calculate width in order to have no surprises with other web-browsers.