I have such html code:
<div class="one1">
<div class="one">
<input class="two" name="user[email]" placeholder="Ваш e-mail" required="required" type="email">
</div>
</div>
and css
.one1{
background-color: #000;
width:200px;
height: 200px;
}
.one{
margin: 0 auto;
background-color: #cecece;
width:180px;
height: 200px;
}
.two{
width: 100%;
margin: 0;
padding: 0;
}
But why input is little bit to big on right border? How to do it clear as it's one div? (also there will be rounded borders and shadow)
Here:
link
Best is to remove 1px on each side Left and Right of you input and to set it manualy instead of 100%
.two{
width: 178px;
margin: 0;
padding: 0;
border:1px solid black;
}
Because its including the border width. Try:
.two{
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
It is caused by the border added by the user agent stylesheet. Add border: 0; to the two class.
.two{
width: 100%;
margin: 0;
padding: 0;
border:0;
}
you remove the margin and padding but input has a border also. So try to add border:none for the input.
Demo
If you want to keep the border at 1 px go for:
.two {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
The browser is calculating the width (100%) of the input based on content + padding, you want instruct the broswer to include the borders as well.
you can use this css property
input.two{
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
Related
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
height: 100px;
width: 500px;
padding: 20px;
border: 40px solid black;
background-color: blue;
}
<div class="box">
With border-box - with padding & border
</div>
With border-box - with padding & border
Why in the example above padding applied only from the top and left?
To be clear again: box-sizing: border-box; make the box include the border into width and height calcul of the block.
It does not apply padding-bottom because you are setting a box of height: 100px
But next to that you are setting border of 40px and padding of 20px. So if you think about it reachs: 40px + 40px + 20px + 20px = 120px just for padding and border.
So this is going over the block height you set 120px > 100px. So html try to make its best based what your telling it.
I would recommand as follow:
.box {
min-height: 100px;
height: auto;
}
DEMO:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
min-height: 100px;
height: auto;
width: 500px;
padding: 20px;
border: 40px solid black;
background-color: blue;
}
<div class="box">
With border-box - with padding & border
</div>
I encountered a problem: Parent element with only child has height even if the only child had all paddings, margins, borders, outline, height and width set to zero, however when I set display to none it suddenly works.
Why is this happening? What have I forgotten? How can I reach the point when parrent element will have height of zero without altering the height of parent element?
Here is quick snippet I've made.
* { box-sizing: border-box; }
div{
border: 3px red solid;
margin: 0;
padding: 0;
}
input{
display: inline-block;
height: 0;
width: 0;
padding: 0;
margin: 0;
outline: none;
border: none;
}
<div><input type="text"></div>
Thanks.
Edit:
I need input to be displayed as inline-block as well, is there any way to do that with display inline-block?
Set the divs line-height to 0
* {
box-sizing: border-box;
}
div {
border: 3px red solid;
margin: 0;
padding: 0;
line-height: 0;
}
input {
display: inline-block;
height: 0;
width: 0;
padding: 0;
margin: 0;
outline: none;
border: none;
}
<div><input type="text"></div>
Here you are facing the behavior of inline-block elements and their alignment. So to fix this you need to set line-height:0 to the div like suggested by Paulie_D or font-size:0 AND change the alignment of the input as by default it's baseline.
* { box-sizing: border-box; }
div{
border: 3px red solid;
margin: 0;
padding: 0;
font-size:0;
/*Or
line-height:0;*/
}
input{
/*display: inline-block; no needed since it's the default value */
height: 0;
width: 0;
padding: 0;
margin: 0;
outline: none;
border: none;
vertical-align:top; /*Add this*/
}
<div><input type="text"></div>
Set the input to display: block
I got an input form that is supposed to be 100% wide inside my .content class and have 20px padding inside that class and 8px padding to the left inside of that input form. The problem is that the left padding inside the input form overrides the padding inside the .content class to the right.
JS: http://jsfiddle.net/8AsxX/1/
CSS:
.content {
min-height: 100%;
background-color: #000;
padding: 20px;!important
}
input.text.big {
background-color: #ffffff;
height: 30px;
width: 100%;
border: solid 1px #cccccc;
padding-left: 8px;
color: #333;
}
HTML:
<div class="content">
<input class="text big" name="url" type="url" placeholder="Example: http://www.facebook.com/FANPAGE-URL" required="">
</div>
The whole width is calculated like 100% + 8px for the input element, so it is overlapping parent div with padding:20px. You can fix it using calc for the input :
width: calc(100% - 8px);
Example
Box sizing should do the trick.
.content {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
I believe the behaviour is by design. You can compensate for it by increasing the right-padding of the container:
.content {
min-height: 100%;
background-color: #000;
padding: 20px 28px 20px 20px;
}
I can't seem to be able to wrap my mind around this one.
It seems that by adding some padding (padding-left: 3px) to my textarea, and it pushes it right out of my div with the border. Adding some padding for text inside the summary box would be useful as it would be more legible to the user.
Here is the result:
This is what it should look like:
Here is the HTML / CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.fcontent_text {
font-size: 8.5pt;
text-align: right;
color: rgb(11,63,113);
}
#fcontent_container {
width: 800px;
display: block;
position: relative;
margin: 5px;
}
#fcontent_wrapper {
border: 1px solid rgb(128,128,128);
}
#summary {
width: 100%;
margin: 0;
border: 0;
position: relative;
padding-left: 3px;
height: 50px;
}
</style>
</head>
<body>
<div id="fcontent_container">
<div class="fcontent_text">Summary</div>
<div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div>
</div>
</body>
</html>
Add box-sizing: border-box to #summary so that you can set both width: 100% and left and right padding without the contents spilling over into the container.
box-sizing
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.
For cross-browser compatibility, be sure to include prefixes:
#summary {
width: 100%;
margin: 0;
border: 0;
position: relative;
padding-left: 3px;
height: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Using box-sizing
You can use box-sizing: border-box;
Check this out: http://codepen.io/gopkar/pen/HiEjn
Without box-sizing
Change the width of your textarea from width: 100% to width: 795px;
Have a look at http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>
For some odd reason this solution seems to circumvent everything and works flawlessly:
<div style="width: 800px">
<div style="text-align: right;">Expand</div>
<div style="padding-right: 6px;">
<textarea style="width: 100%; padding: 2px; margin: 0; border : solid 1px #999"></textarea>
</div>
</div>
I am trying to code a chat page but I got a problem with the sizing of the divs :/
I have a structure like this:
<div class="page">
<div class="chat-holder">
<div class="chat-text">
</div>
</div>
</div>
and the page class is (let's say the width and the height of the screen so it is
.page {
width: 100%;
height: 100%;
}
The chat-holder I want to have a width of 740px and the height should be any height but not more than the browser height and a background white and a 20px padding around the chat area (so far I tried this):
.chat-holder {
background: #fff;
width: 740px;
max-height: 100%;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Now my chat area I want to have a 1px black border inside this chat-holder and if the chat is not bigger than the browser minus that 40px padding, I want it to have the size of the text that is in it. If it is bigger, I want it to have scroll inside it (so far I tried this)
.chat-text {
width: 100%;
max-height: 100%;
border: 1px solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
}
But this doesn't work, the chat-text div goes out of the chat-holder, as i see it is because the max-height doesn't work inside a max-height. I hope there is a work-around on this issue because I really don't want to use jQuery or something to fix it.
Thank you in advance
EDIT: jsFiddle http://jsfiddle.net/KjX7s/2/
You have to set the height as well as the max-height:
.page {
width: 100%;
height: 100%;
}
.chat-holder {
background: #fff;
width: 740px;
min-height: 20px;
max-height: 100%;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.chat-text {
width: 100%;
min-height: 20px;
max-height: 100%;
border: 1px solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
}
See the fiddle: http://jsfiddle.net/KjX7s/14/
Add
overflow: auto;
inside .chat-holder .
And put an height calculated with CSS Calc():
max-height: calc(100% - 41px);
http://jsfiddle.net/KjX7s/5/