#grenze
{
background: green;
height: 96vh;
width: 96vh;
}
#baukasten
{
background: white;
height: 86vh;
width: 86vh;
margin: 5vh;
border: 1px solid #DDDDDD;
overflow: hidden;
}
<div id="grenze">
<div id="baukasten">
</div>
</div>
Margin works only to left but not to top, I tried with different browsers and it's always the same. What could be the problem here? Is it a bug?
EDIT:
I can't use padding on grenze instead because
$( ".dragresize" ).draggable({
containment: "#grenze"
});
Won't do what I need
This is known as margin collapsing and is a feature of CSS, not a bug.
Parent and first/last child
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the
margin-top of a block from 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 from the margin-bottom of its
last child, then those margins collapse. The collapsed margin ends up
outside the parent.
Go ahead and inspect your element and you'll see the margin is there, and it has indeed fallen outside of it's parent.
#grenze {
background: green;
height: 96vh;
width: 96vh;
padding: 5vh;
box-sizing: border-box;
}
#baukasten {
background: white;
height: 86vh;
width: 86vh;
border: 1px solid #DDDDDD;
overflow: hidden;
}
<div id="grenze">
<div id="baukasten">
</div>
</div>
#grenze {
background: green;
height: 96vh;
width: 96vh;
}
#baukasten {
background: white;
height: 86vh;
width: 86vh;
transform: translate(5vh, 5vh);
border: 1px solid #DDDDDD;
overflow: hidden;
}
<div id="grenze">
<div id="baukasten">
</div>
</div>
Related
I created a div with a border-radius 4% and wanted to add a div inside it. But now the border-radius is getting affected. How can I add the new div without affecting the previous border-radius.
If I add same border radius for the inner div
Without any border-radius
body {
background: #4FA2AD;
}
.upper {
background-color: #035961;
height: 30%;
}
.main {
background-color: antiquewhite;
height: 50vh;
width: 25%;
margin: 25vh auto;
border-radius: 4%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
}
<body>
<div class="main">
<div class="upper">
</div>
</div>
</body>
Overflow hidden will cut off any content that goes outside of the parents border, including any overlap at the corners.
overflow: hidden;
This is sometimes not a viable solution (Where you require content to overflow or extend the container) however since you have a fixed size, it is valid in this case.
body {
background: #4FA2AD;
}
.upper {
background-color: #035961;
height: 30%;
}
.main {
background-color: antiquewhite;
height: 50vh;
width: 25%;
margin: 25vh auto;
border-radius: 4%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
overflow: hidden;
}
<body>
<div class="main">
<div class="upper">
</div>
</div>
</body>
I'd like to create an outer DIV, which contains several inner DIVs. At the moment, this works perfect.
But I have some troubles with the margin of the outer div. If the outer DIV has a fixed height (f.ex. height: 100px;), there will be a margin at the bottom. But if I set the height to auto (it should have only the height of all inner DIVs), the margin-bottom disappears.
Example:
Here, the margin-bottom applies normaly. The height of the outer-box is set to a fixed height:
https://jsfiddle.net/v81mehc5/3/
But changing the height of the outer DIV from a fixed height (75px) to auto, the margin-bottom of 40px disappears.
https://jsfiddle.net/v81mehc5/2/
What's missing in the second case? What's wrong overthere?
HTML
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
CSS
.outer-box
{
width: 200px;
height: 75px; /*if height: auto > no margin-bottom will be applied*/
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
Thank you very much for your help.
Nothing is missing but you are using floating elements inside the outer div. So height:auto means height:0 in you case so you are only seeing the margin-bottom (that you thought it's the height).
In order to fix this you need to add overflow:hidden to outer div.
.outer-box
{
width: 200px;
height: auto;
overflow:auto;
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
More questions related to the same issue for more details :
Why does overflow hidden stop floating elements escaping their container?
CSS overflow:hidden with floats
Floating elements collapse their container. You'll see that if you apply a border to it:
<div style="border: 1px solid #666; margin-bottom: 40px;">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
You can use a clearing technique to get around this as a possible solution that works in IE8 and up:
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div style="border: 1px solid #666; margin-bottom: 40px;" class="clearfix">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
Here is my code taken from the codepen: http://codepen.io/rags4developer/pen/ONoBpm
Please help me to fix these problems.
How do I prevent the the main div & footer from spilling out of the container div ? overflow: hidden for container will not always work !
How do I make the container div height equal to page height without setting its height to a fixed percentage ?
HTML:
<body>
<div id="container">
<div id="nav">nav links 1,2,3 etc</div>
<div id="main">
<!--no text here-->
<div id="left">left panel</div>
<div id="right">right panel</div>
</div>
<div id="footer">footer</div>
</div>
</body>
CSS:
* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
}
#nav {
border: 4px solid red;
height: 15%;
}
#main {
border: 4px solid black;
height: 100%;
background: gray;
}
#left {
border-top: 4px solid green;
border-left: 4px solid green;
border-bottom: 4px solid green;
float: left;
width: 15%;
height:100%;
/*I will make this gradient later*/
background: #9e9999;
}
#right {
border: 4px solid blue;
float: right;
width: 85%;
height: 100%;
border-radius: 20px 0 0 0;
background: white;
}
#footer {
border: 4px solid pink;
clear: both;
}
I am not completely sure if I understand you correctly, but your heights (i.e. the heights within the #container div) add up to 15% + 100% + the height of the footer = at least 115% of the #container height plus the footer height, which causes the "spilling over".
I changed the #content height to 80% and added height: 5%; to the footer in this fork of your codepen: http://codepen.io/anon/pen/EKeOdm
Now everything remains within the #container. Is this what you want?
The clearfix solution still works well for floated elements, IMO. Try removing the height styles and add this:
#main:before,
#main:after {
display: table;
content: "";
}
#main:after {
clear: both;
}
Further: http://nicolasgallagher.com/micro-clearfix-hack/
Using display table should fix this.
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
**display: table;**
}
#content {
border: 4px solid black;
background: gray;
height: 100%;/*Not sure 100% of what ? Parent ???*/
**display: table-row;**
}
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
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>