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/
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 have a container div with a fixed width and a border of 1px. It contains two divs which have a fixed width and height and one is floating to the left and the other is floating the right. I use box-sizing: border-box.
An example can be seen here https://jsfiddle.net/joker777/6r9dc5pw/5/
The problem is that the border size increases when I zoom out and it reduces the space inside the container because I use border-box. This has the consequence that there is not enough space for the two floating divs.
#container {
width: 700px;
border: 1px solid;
overflow: hidden;
box-sizing: border-box;
}
#left-box {
width: 21.7%;
height: 150px;
float: left;
box-sizing: border-box;
}
#right-box {
width: 78.3%;
height: 150px;
float: right;
border-left: 1px solid;
box-sizing: border-box;
}
<div id="container">
<div id="left-box"></div>
<div id="right-box"></div>
</div>
I've got 3 div's that I want to look like this:
Here's the HTML:
<section class="main-window">
<div id="topdiv"></div>
<div id="middiv"></div>
<div id="botdiv"></div>
</section>
And the CSS:
.main-window
{
vertical-align: middle;
border: 2px solid gray;
border-radius: 5px;
width: 90%;
height: 70%;
background-color: White;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topdiv {
background-color: beige;
height: 40%;
border: 2px solid black;
}
#middiv {
background-color: lightblue;
height: 40%;
border: 2px solid black;
}
#botdiv {
background-color: lightgreen;
height: 20%;
border: 2px solid black;
}
Here's the fiddle.
Notice that I've added heights to the divs of 40%, 40% and 20% so that they fill the 100% of the parent div. However, after I added a border to each div, the total height is increased slightly beyond the parents boundaries.
My question is: can I set heights of 40% for the two top divs and make the bottom div stretch until the bottom of its parent div?
You should add this css to each child element:
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
Working Fiddle
and if you make adjustments in border, it seems to look nice.
Updated Fiddle
include jQuery and write below jQuery for third div
$(document).ready(function () {
$("#botdiv").height($(".main-window").height() - $("#topdiv").height() - $("#middiv").height());
});
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 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 */
}