Using the following HTML I need to:
Make sure that the border of target div (pink) is adjacent of the wrapper-target red border div.
Must work on any value of border-radius.
Considering that:
I am using box-sizing: border-box; but can be also reset to a default value.
I cannot change the border-radius property of the target div.
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50px;border:25px solid red;">
<div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit">
</div>
</div>
NOTES:
I do not need to make a circle in this specific example :).
Part 1 of the problem: (Child becoming a round in original demo)
The problem is because of the box-sizing: border-box. When this is set, the defined height, width of the box (250 x 250px) is considered as inclusive of the width of the border and the padding. So, the element's actual content area is only 200px x 200px (excluding 50px for horizontal & vertical borders).
Thus the child div will only have a size of 200px x 200px (this can be verified in Dev tools). When a border-radius of 100px is inherited from parent, it becomes a round as that is half of its dimensions.
So, the border-radius cannot be inherited for the child if the shape has to be maintained. It should be set as 80px (approximate). (Initially I had mentioned that a value of 76px was working better and that I was trying to find out the reason for it - please refer to Part 2 for the reason.)
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper-target"
style="position:absolute;
top:100px;left:100px;
width:250px;height:250px;
border-radius:100px;
border:25px solid red;">
<div id="target"
style="position:relative;
width:100%;height:100%;
background-color:plum;
border-radius:76px;">
</div>
</div>
Part 2 of the problem: (even when border-box is removed, it leaves a gap)
This is because the assigned border-radius is the radius of the outer border and not that of the inner border. The inner border radius is calculated as outer border radius minus border thickness.
As per spec:
The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness.
So, the child's border-radius need to be equal to the inner border radius of the parent. That is, the child's border-radius should be 75px (100px - 25px thickness of border).
This is also why a border-radius of 76px worked better than the 80px as mentioned earlier. 76px is closer to 75px than 80px :)
Solution without changing border radius of target:
If border-radius: inherit on the child (target) cannot be changed then the only option is to make the child the same dimensions as parent (using calc), positioning it and then clipping the overflow in parent.
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper-target" style="position:absolute;
top:100px;left:100px;
width:250px;height:250px;
border-radius:100px;
border:25px solid red;
overflow: hidden;">
<div id="target" style="position:relative;
width:calc(100% + 50px);height: calc(100% + 50px);
top: -25px; left: -25px;
background-color:plum;
border-radius:inherit;">
</div>
</div>
Try adding same bg color of target div to main div.
<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50px;border:25px solid red; background-color:plum;">
<div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit">
</div>
</div>
DEMO
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50%;border:25px solid red;">
<div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit"></div>
</div>
Set value of border-radius in %, not in px, if you want to make a circle.
You inherit the border-radius with a fixed value while the child element has other dimensions. Calculate the border in percent. Use border-radius:40%; on your wrapper.
Maby this wil help. The css is now set in a external file.
The border-radius:inherit; checks the border-radius that is already there. so it sets to that border-radius.
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#wrapper-target {
position: absolute;
top: 100px;
left: 100px;
width: 250px;
height: 250px;
border-radius: 50px;
border: 25px solid red;
background-color: plum;
}
#target {
position: relative;
width: 100%;
height: 100%;
background-color: plum;
border-radius: inherit;
}
<div id="wrapper-target">
<div id="target">
</div>
</div>
Related
Why is it that <input> and <select> fields are displayed in different sizes, even if formatted in the same way?
.classname fieldset input,select {
float: right;
width: 50%;
}
The <select> ends up a little smaller than <input>. - Here's a fiddle.
Try specifying box-sizing and reseting border values:
.classname fieldset input,select
{
float: right;
width: 50%;
-ms-box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #AAA; /* Set your color here. */
}
As noted, you likely want to set box-sizing, however it should be set to border-box and not content-box, meaning you should also not need to change anything else:
.classname fieldset input,select {
float: right;
width: 50%;
box-sizing:border-box;
}
Box-Sizing:
The box-sizing CSS property is used to alter the default CSS box model
used to calculate widths and heights of elements.
border-box
The width and height properties include the padding and border, but
not the margin.
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 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.
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/
http://designobvio.us/vodka/ Live demo
I've set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars?
How can I achieve an effect?
HTML
<div id="main">
</div>
CSS (not currently the live code but this is what i've tried )
html, body{height:100%; width:100%;}
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}
By default the borders, margin and padding are not part of width/height and are added on top. That's why you get scrollbars as the full dimensions of the box are 100% in height and width plus the border-width.
You can set the box-sizing property to border-box, which tells the browser to include the calculation for borders and padding in the width/height properties (in opposite to content-box, which is the default value):
#main {
box-sizing: border-box;
[...]
}
As especially IE8 and the earlier version of the other browser families don't support this css-property, it's a good idea to add some browser-specific definitions, too:
#main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Take a look at the mozilla doku for detailed information on box-sizing.
I know this is an old post, but as it pops up on Google first page... Here is my solution that seems to work fine cross browsers:
height: 0:
border-style: solid;
border-width: 8vw 0 0 100vw;
border-color: transparent transparent transparent red;
Just used it for an :after pseudo-element in order to turn it in a triangle shape and it works just fine (test down to ie10).
Simply use 100vw instead of 100% and it should do the trick.
Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you're really telling it is "make the box 100% and then add 10px worth of border".
Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100%. So you have a few options:
1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/
2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:
html,body { height:100%; padding: 0; margin: 0; }
#container {
min-height:100%;
border-right: 5px solid #000;
border-left: 5px solid #000;
position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
height: 100px;
border-top: 5px solid #000;
background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
height: 100px;
border-bottom: 5px solid #000;
background-color: blue;
position: absolute;
bottom: 0;
width: 100%; /* with absolute position, a width must be declared */
}
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
jsfiddle here: http://jsfiddle.net/Qw2cb/
You can give box-size:border-box; to 'main', like
#main{
box-size:border-box;
}
Doing so the border will be added to 100% height of main. Learn more about box sizing here
So, you are saying that you do not want to display scrollbars?
CSS:
#main
{
overflow: hidden;
height: 100%;
position: absolute;
margin: 0px;
}