CYBERSIX CYBERSIX -4 years ago 104
CSS Question

css container is not adjusting when i resize the browser

i have a container that holds an image slider and images are responsive but when i resize the browser i get this big gap between my slider and the next div with the class container
why is that?

<!-- Image Slider -->
<div class="container">
<div id="slider">
<div id="left-side-slider">
<img src="img/test.jpg" alt="">
</div>
<div id="right-side-slider">
<img src="img/precher.jpg" alt="">
<img src="img/sermons.jpg" alt="">
</div>
</div>
</div>

<!-- End of Image Slider -->

<!-- Welcome Message -->
<div class="container">
<div id="welcome-message">
<h1><span></span> WELCOME TO OUR CHURCH</h1>
<article>
Our Mission is to glorify God, proclaiming and following Christ, in the power of the Holy Spirit.
</article>
</div>
</div>

<!-- End of Welcome Message -->


the css section is

.container{
max-width: 960px;
margin: 0 auto;
padding: 0px 20px;
}


/* Image Slider section */
#slider {
margin-top: 10px;
min-height: 350px;
}

#left-side-slider {
width: 72%;
float:left;
margin-right: 2%;
}

#left-side-slider img , #right-side-slider img {
width: 100%;
}

#right-side-slider {
width: 25%;
float: left;
}

/* Welcome Message */
#welcome-message {
background-color: @bg-color;
height: 200px;
margin-top: 1%;
}

#welcome-message h1 {
padding-left: 50px;
padding-top: 30px;
font-family: @Oswald;
font-size: 35px;
color: @white;
}

#welcome-message span {
border-left: 1px solid @white;
padding-right: 15px;
}

#welcome-message p {
font-family: @OpenSans;
font-size: 32px;
color: @light-gray;
padding-left: 50px;
}

Answer Source

Because you use min-height: 350px; for

#slider {
    margin-top: 10px;
    min-height: 350px;
}

Just remove min-height

Working JSFiddle: http://jsfiddle.net/tzfzjyp8/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download