Menu
I'm currently building a website and have a small problem that i cant seem to tackle, I have created a div with a height of 100%, inside that div is a slider div also with a height of 100%, the problem is the first div displays a height of 0px so that the div that should come below the slider div displays behind the slider div, anyone that can help me?
Here's my code:
.slider-container {
width: 100%;
min-height: 100%;
background-color: white;
float: left;
}
.main-content {
width: 100%;
height: 1000px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
float: left;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
The slider-container div should have 100% height so that the main-content div comes below it.
Thanks for in the advance!
453
The % unit is always relative to some value .. even though you've specified height: 100%; on your <body> you will notice it ends up being 0px tall as are all the <div> that you gave 100% height to, because those values are relative to its parent container, which ends up being the root <html> element which currently has no explicit height set, so it defaults to auto. If you give the root element height: 100%; you will get the expected behaviour
92
Try giving a height to:
html, body {
width:100%;
position:relative;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
