CODEWITHSUNDEEP
htmlcss
Youstay Igo
Youstay Igo

Reputation: 331

Footer placement

I have two divs. The left one is known as #menudiv and the right one is known as #contentdiv. The CSS is presented below:

#menudiv{
    width:20%;
    padding:3px;
    float:left;
    height:100%;
    font-family:ubuntu;
    font-size:25px;
    color:#404040;
}

#contentdiv{
    font-family:verdana;
}

#footer{
    position:relative;
    float:bottom;
    display:flex;
    justify-content:space-between;
}

Now it visible that I have set menudiv's height to 100%. This is because I don't want contentdiv to spread out and cover the space under menudiv once menudiv's elements have ended.

After writing all the content of contentdiv, I now need to place a footer at the bottom of the page. The issue is that the footer content appears right under contentdiv (because menudiv's height is set to 100%). I want the elements/contents of the footer to spread evenly at the bottom of the page (so that they start from under menudiv).

This is the page structure:

<div id="menudiv">
    <img class="titleico" src="images/home.png" /> &nbsp; &nbsp; HOME<br />
    <ul id="menulist">
        <li><a href="yo">Menu item 1</a></li>
        <li>Menu item 2</li>
    </ul>
</div>

<div id="contentdiv">
    <!-- several paragraphs go here as seen in the image at bottom -->
</div>

<div id="footer">
    <div>Footer item 1</div>
    <div>Footer item 2</div>
    <div>Footer item 3</div>
</div>

How can I achieve this?

enter image description here

Upvotes: 0

Views: 76

Answers (3)

Nikson K John
Nikson K John

Reputation: 461

change your footer style like this

<div id="footer" style="clear:both">
<div style="float:left;width:25%">Footer item 1</div>
<div style="float:right;width:25%">Footer item 2</div>
<div style="float:right;width:25%">Footer item 3</div>

Upvotes: 0

Sarvap Praharanayuthan
Sarvap Praharanayuthan

Reputation: 4360

Add float: none and clear: both to your footer. Since your footer is not a block level element and the previous elements are floating, the footer is positioned such.

footer{
clear: both;
float: none;
}

Upvotes: 1

Gregg Duncan
Gregg Duncan

Reputation: 2725

wrap both your menu and content in a container and put your footer after that. This way the menu will be 100% of the container not the html body. And the container will be whatever height your contentdiv allows. 

<div id="container">
    <div id="menudiv"></div>
    <div id="contentdiv"></div>
</div>
<footer>
</footer>

Upvotes: 0

Related Questions