Footer filling in unused body space

[jamesbrown03]

I have had the issue where my footer is filling in the unused page. You can see a screenshot here -

The footer html is as follows -

 <footer class="footer-distributed">
 
            <div class="footer-left">
     
            <h3>LMG</h3>
     
            <p class="footer-links">
            <a href="#">Home</a>
        ·
            <a href="#">Blog</a>
        ·
            <a href="#">Pricing</a>
        ·
            <a href="#">About</a>
        ·
            <a href="#">Faq</a>
        ·
            <a href="#">Contact</a>
            </p>
     
            <p class="footer-company-name">Ludiment Media Group (LMG) &copy; 2020</p>
            </div>
     
            <div class="footer-center">
     
            <div>
            <i class="fa fa-map-marker"></i>
            <p><span>21 Revolution Street</span> Delhi, India</p>
            </div>
     
            <div>
            <i class="fa fa-phone"></i>
            <p>+61 13 74 74</p>
            </div>
     
            <div>
            <i class="fa fa-envelope"></i>
            <p><a href="mailto:support@lmg.com">support@lmg.com</a></p>
            </div>
     
            </div>
     
            <div class="footer-right">
     
            <p class="footer-company-about">
            <span>About Us</span>
        LMG is a magazine focused on Technology. Join us and keep informed on the latest tech news.
            </p>
     
            <div class="footer-icons">
     
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-linkedin"></i></a>
            <a href="#"><i class="fa fa-github"></i></a>
            <a href="#"><i class="fa fa-reddit"></i></a>
     
            </div>
     
            </div>
     
            </footer>

My css is -

.footer-distributed{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;
 
	padding: 55px 50px;
	margin-top: 80px;
}
 
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}
 
.footer-distributed .footer-left{
	width: 40%;
}

.footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Montserrat';
	margin: 0;
}
 
.footer-distributed h3 span{
	color:  #5383d3;
}
 
 
.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}
 
.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}
 
.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}
 
 
.footer-distributed .footer-center{
	width: 35%;
}
 
.footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}
 
.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}
 
.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}
 
.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}
 
.footer-distributed .footer-center p a{
	color:  #5383d3;
	text-decoration: none;;
}
 
.footer-distributed .footer-right{
	width: 20%;
}
 
.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #92999f;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}
 
.footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}
 
.footer-distributed .footer-icons{
	margin-top: 25px;
}
 
.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;
 
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;
 
	margin-right: 3px;
	margin-bottom: 5px;
}
 
 
@media (max-width: 880px) {
 
	.footer-distributed{
		font: bold 14px sans-serif;
	
	}
 
	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}
 
	.footer-distributed .footer-center i{
		margin-left: 0;
	}
	.main {
		line-height: normal;
		font-size: auto;
	}
 
}

All help appreciated Thanks

[PaulOB]

Hi,

We don’t have enough information to help with your problem so you will need to clarify a little more please

I can see your image but I don’t know what you mean by ‘filling unused space’. Vertical space or horizontal space?

The footer code you supplied will be as wide as its containing block which will be as wide as the body assuming no other restrictions have been imposed on it (like width or min/max/width etc). If you want the footer as wide as the two images above it then they will all need to be in the same container or in a container that is sized in the same way.

If you can clarify the question I’m sure we can be of more help

[jamesbrown03]

@PaulOB The footer shouldn’t be next to the images like that and the divs aren’t aligned properly. The part on the right of the images is not meant to be there it should be like this -

However it is like this -

I’m not sure why this is happening and how. Here is the html for my index.html that is having the issue- `

LMG

    <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>
<body>
    <!--Start nav bar-->

    <header>
    
        <a class="logo" href="index.html">LMG</a>
        <nav>
            <ul class="nav__links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Popular</a></li>
                <li><a href="meettheteam.html">The Team</a></li>
            </ul>
        </nav>
        <a class="cta" href="#">Contact</a>
        <p class="menu cta">Menu</p>
    </header>
    <div class="overlay">
        <a class="close">&times;</a>
        <div class="overlay__content">
            <a href="#">Home</a>
            <a href="#">Popular</a>
            <a href="meettheteam.html">The Team</a>
        </div>
    </div>
    </div>
    <script type="text/javascript" src="mobile.js"></script>
    <!--End Nav bar-->
    <!--Start content-->
    <div id="page-container">

        <div class="articles-top">
            <img src="images/csgo-d3d-error-fix.jpg" style="width: 100%;">
            <a class="tag" href="#">Feature</a>
            <a class="img-text" href="Foldingathome.html">Can Technology help find<br>a cure for covid-19?</a>
        </div>
        <div class="articles-top">
            <img src="images/csgo-d3d-error-fix.jpg" style="width: 100%;">
            <a class="tag" href="#">Feature</a>
            <a class="img-text" href="#">Lorem ipsum dolor sit amet</a>
        </div>
        <div class="articles-top">
            <img src="images/csgo-d3d-error-fix.jpg" style="width: 100%;">
            <a class="tag" href="#">Feature</a>
            <a class="img-text" href="#">Lorem ipsum dolor sit amet</a>
        </div>
        </div>
       <div class="featured-articles">
           <h1 class="featured-img1">featured</h1>
           <img src="images/csgo-d3d-error-fix.jpg" style="width: 100%" class="featured-images">
           
           <h2 class="Featured-article-title"><a class="author-title" href="feature-article2.html">Do people Benifit from Technology</a></h2>
           <h3 class="author">By<a class="author-name" href="meettheteam.html">Kingsley Lao</a></h3>
       </div>
       <div class="featured-articles">
        <img src="images/csgo-d3d-error-fix.jpg" style="width: 100%;" class="image-feature-margins">
        <h2 class="Featured-article-title">Hello</h2>
        <h3 class="author">By<a class="author-name" href="meettheteam.html">Tristan Turnbal</a></h3>
        </div>
        
        <div class="featured-articles">

            </div>
        </div>
    </div>

</div>
    <!--<img class="img1" src="images/csgo-d3d-error-fix.jpg">
       
    <img class="img2" src="images/csgo-d3d-error-fix.jpg">-->
       
    
      
        <footer>
            <div class="footer-distributed">
        <div class="footer-left">
 
        <h3>LMG</h3>
 
        <p class="footer-links">
        <a href="#">Home</a>
    ·
        <a href="#">Blog</a>
    ·
        <a href="#">Pricing</a>
    ·
        <a href="#">About</a>
    ·
        <a href="#">Faq</a>
    ·
        <a href="#">Contact</a>
        </p>
 
        <p class="footer-company-name">Ludiment Media Group (LMG) &copy; 2020</p>
        </div>
 
        <div class="footer-center">
 
        <div>
        <i class="fa fa-map-marker"></i>
        <p><span>21 Revolution Street</span> Delhi, India</p>
        </div>
 
        <div>
        <i class="fa fa-phone"></i>
        <p>+61 13 74 74</p>
        </div>
 
        <div>
        <i class="fa fa-envelope"></i>
        <p><a href="mailto:support@lmg.com">support@lmg.com</a></p>
        </div>
 
        </div>
 
        <div class="footer-right">
 
        <p class="footer-company-about">
        <span>About Us</span>
    LMG is a magazine focused on Technology. Join us and keep informed on the latest tech news.
        </p>
 
        <div class="footer-icons">
 
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-linkedin"></i></a>
        <a href="#"><i class="fa fa-github"></i></a>
        <a href="#"><i class="fa fa-reddit"></i></a>
 
        </div>
 
        </div>
 
        </footer>
    </div> 

`

[ronpat]

Still not enough information, Can you post a link to the site?

It would be helpful if you could also create a fake screen shot showing how you would like the page to look.

[jamesbrown03]

@PaulOB here is a link to the website - https://lmgmag.000webhostapp.com/index.html

[Ray.H]

@jamesbrown03

The footer shouldn’t be next to the images like that and the divs aren’t aligned properly.

Your footer needs to clear the floats above it.
Add clear:both; to your footer rules

.footer-distributed {
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 55px 50px;
    margin-top: 80px;
    clear: both; /*clear the floats above*/

[jamesbrown03]

Thanks that fixed it. I’m not the best at css. Thanks so much