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>
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>
.outer {
padding: 50px;
}
.inner {
width: 500px;
height: 1000px;
border: 1px solid gray;
margin: auto;
}
<div class="outer">
<div class="inner">
<div class="content">qwerty</div>
</div>
</div>
As far as I am concerned, inline-block display isn't convenient, cause I want to center my inner div.
it's break down the right padding because right and left padding of outer div is 50+50=100px and your inner div width is 500px so when window screen is less then 600px outer div right padding break down and inner div width 500px takes its fixed width.
In this case you can use media query or max-width method. you also set width to 50% or 100% no media query no max-width need to be set.
Here is solution with max-width method
body{
margin:0;
}
.outer {
padding: 50px;
border: 1px solid red;
}
.inner {
max-width: 500px;
height: 1000px;
border: 1px solid gray;
margin:0 auto;
}
<div class="outer">
<div class="inner">
<div class="content">qwerty</div>
</div>
</div>
try adding this at the top of your style-sheet:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
also you should use
margin: 0 auto
for your inner div to center horizontally
Change the width
<div class="outer">
<div class="inner">
<div class="content">qwerty</div>
</div>
</div>
.outer {
padding: 50px;
border:1px solid red;
}
.inner {
width: 400px;
height: 1000px;
border: 1px solid gray;
margin:0 auto
}
Fiddler https://jsfiddle.net/bpyfckn6/
Your .inner has a width:500px so it won't be less than that. To fix your issue:
.inner {
width: 100%;
max-width:500px;
}
fiddle: https://jsfiddle.net/4sk4bqxh/
This doesn't yet make sense to me. What am I missing?
The code is below and on Codepen.
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
body {
height: 100vh;
background: pink;
}
.middle {
position: relative;
top: 200px;
/* uncomment the border to kill the scrollbar! */
/* border: 1px solid green; */
}
.middle div {
margin-top: 100px;
border: 1px dashed yellow;
}
<div class="middle">
<div>Text</div>
</div>
box-sizing: border-box; doesn't make any difference. Adding a border causes the vertical margins to not collapse, but what exactly is going on?
with border: no scrollbar
without border, the two top margins collapse, so there should be less vertical space required, yet we get a vertical scrollbar on the full-height body.
This is due to margin collapsing:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
(https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing)
When .middle does not have a border the margin applied to .middle div ends up outside of it effectively making body have height: 100vh; and margin-top: 100px;. This is what causes the scrollbar.
With the border on .middle the margin is contained within .middle so body just has height: 100vh; and no scrollbar.
As confirmation of this, you will find that you get the same outcome if you were to add a border to body instead.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
background: pink;
border: 1px solid red;
}
.middle {
position: relative;
top: 200px;
/* uncomment the border to kill the scrollbar! */
/* border: 1px solid green; */
}
.middle div {
margin-top: 100px;
border: 1px dashed yellow;
}
<div class="middle">
<div>Text
</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 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/