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
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 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.
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/
I am displaying the html content in a table. For printing the tags i am using textArea in the <td> of the table. So i want to adjust the height and width of textArea so that it is equal to the <td>. How can i do this
dabblet.demo
the problem is that textarea behave not normal box-model, that's why we need this trick with box-sizing
this CSS will help you:
textarea {
border: none;
width: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
if you have no access to css file, you can use inline css
like this:
<textarea style="border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"> </textarea>
Try using this CSS:
td textarea {
width: 100%;
height: 100%
}
Or inline:
<td>
<textarea style="width: 100%; height: 100%; border: none">
</textarea>
</td>
give the textarea a 100% width and height style
td textarea {
width:100%;
height: 100%;
}
but also take into account the paddings and borders or the textarea so that it would not overflow from the td.
hope this helps.