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.
Related
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>
I have a textarea that i'd like to shrink in width: but no matter what I set the cols= parameter to, the textarea keeps its width. Why is this?
The code looks like
<textarea id="edit-submitted-question-request" name="submitted[question_request]" cols="10" rows="5" class="form-textarea required"></textarea>
and it can be found here:
http://quaaoutlodge.com/content/dinner-theatre-rock-romance
EDIT A
I commented out width: 100%; in .form-textarea-wrapper textarea in my css and now the textarea renders to the right size but the "resize bar" to extend the text area is still at 100%, why is this?
Found a class in your css that makes problems for your textarea size:
.form-textarea-wrapper textarea {
display: block;
margin: 0;
width: 100%; // <----- Thats the problem
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
width from that class is affecting on textareas. check your css file /system.base.css?nipcyw
you are using one div for the textarea in which you have set width as 100%, Please remove that width part then your cols=parameter will start working.
.form-textarea-wrapper textarea {
display: block;
margin: 0;
/* -------- width: 100%; ------- */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
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.
fiddle
HTML
<div id="a">
<table id="b">
<tr><td></td></tr>
</table>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#a {
background-color: yellow;
}
#b {
background-color:red;
height: 50px;
margin-left: 50px;
width: 100%;
}
I want the table #b to span from 50px from the left of its container (#a) all the way to the right edge of of #a.
By setting the width to 100% it goes off the page because it tries matching the width of #a. If I omit the width then the table is too small.
Setting the table to display:block and removing the width seems to give the desired behaviour. Is this reliable, or is there another method of achieving the same thing? I'd prefer not to resort to absolute positioning.
You can use the calc() function in CSS like this:
#b {
width: calc(100% - 50px);
/* your other stuff */
}
Most browsers support this nowadays. Have a look at caniuse.com to see, which browsers don't.
Example Fiddle
One way to do is is to use box-sizing: border-box
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
...
#a {
...
padding-left: 50px;
}
Unlike Sirko's answer, this is will work in IE8+ and not IE9+
Another way is to use conflicting absolute positioning
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/