Michael Barley Michael Barley - 1 year ago 59
HTML Question

Section mysteriously pushing content down the page

Im developing my site with bootstrap. I have a nav-bar, image slider, products section and an about + footer section. For some reason , my products section is pushing the about section down the page and i can't seem to work out why? also: The sections are the correct distance apart when i shrink the screen, the problem only seems to be there when full screen.


<!-- Products section -->
<section id="products">
<div class="col-sm-3 text-center">
<img src="images/closed-door-with-border-silhouette.png" alt="Doors" />
<p>Your choice of facing-veneered, laminated or primed for internal painting, certified fire rating and prepared for your lock fitting.</p>
<!-- Content more details button-->
<li><a href="#doors" data-toggle="modal">Learn more</a>
<div class="col-sm-3 text-center">
<img src="images/closed-doors-with-windows.png" alt="Door sets" />
<p>Ensure the co-ordination and quality of your interior design specification. Simply select your components and leave the rest to us.</p>
<li><a href="#doors" data-toggle="modal">Learn more</a>
<div class="col-sm-3 text-center">
<img src="images/locked-padlock.png" alt="Security doors" />
<h3>Security Doors</h3>
<p>Guaranteed protection with a line of defence that is the recognised industry leader in timber based security door systems.</p>
<!-- Content more details button-->
<li><a href="#doors" data-toggle="modal">Learn more</a>
<div class="col-sm-3 text-center">
<img src="images/portable-toilet-doors.png" alt="Washroom cubicles" />
<h3>Washroom Cubicles</h3>
<p>Choose from an extensive range of colours and sizes available to suit many applications in the construction and leisure industries.</p>
<li><a href="#doors" data-toggle="modal">Learn more</a>

<!-- About section -->
<section id="about">


<!-- Footer -->
<footer id="footer" class="navbar-inverse">
<div class="container">
<p class="navbar-text"><a href="#">Terms and Conditions</a> | <a data-toggle="modal"href="#creditations">Creditations</a></p>


li {
list-style-type: none; }

section {
min-height: 500px; }

h1 {
font-size: 25px; }

u {
border-bottom: 1px dotted #000;
text-decoration: none; }

footer p {
position: absolute; }

#logo {
height: 60px;
width: 140px;
position: relative;
bottom: 20px;
right: 10px;
padding-left: 20px; }

.nav {
padding-left: 6px; }

.navbar-right {
padding-right: 30px; }

.navbar-header {
padding-right: 20px; }

#footer {
min-height: 0px;
line-height: 25px;
height: 50px;
padding-top: 0;
padding-right: 100px; }

#footer > .container > p > a {
color: white; }

.glyphicon-home {
padding-right: 5px; }

.carousel-control .icon-prev,
.carousel-control .icon-next {
font-size: 50px; }

#myCarousel {
padding-top: 50px; }

.text-justify {
text-align: justify; }

.text-center {
text-align: center; }

@media only screen and (max-width: 400px) {
.text-center {
padding-right: 40px;
/*require padding */
padding-left: 40px;
/*require padding */ } }
#about {
border: 1px solid black;
background-color: red; }

#learnMoreButton:hover {
transition: background-color 200ms ease-out 50ms; }

li > a {
transition: background-color 200ms ease-out 50ms; }

/*# sourceMappingURL=stylesheet.css.map */

Answer Source

This is because you set min-height: 500px to section element. Therefore your section will always have minimum 500px height (on desktop screen you see the gap between this section and about us section because your products take about 150px height, on small screens this section has about 500px so you don't see this gap).

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