CODEWITHSUNDEEP
htmlcssweb
Aisha Ahmed Ahmed
Aisha Ahmed Ahmed

Reputation: 108

the place of the footer Html css

I have this Tow column page layout || but the problem that the footer is for the whole file what if I want the footer to be under the right column only as the black footer in this image

enter image description here

I tried to chand the part

footer content

but it didnt came in the place I wanted

<style>
    html, body {
    font-family: Helvetica;
    height: 100%; /*important for equal height columns*/
    }

    #wrapper{
    height: 100%; /*important for equal height columns*/
    padding-bottom:60px; /*This must equal the height of your header*/
    }

#header{
background-color: #222;
height: 60px; /*This must equal padding bottom of wrap*/
display:block;
padding: 10px;
color: #fff;
}

#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 100%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 80px; /*This needs to match footer height*/
overflow: auto;
}

#side{
background-color: #ccc;
width: 200px;
vertical-align: top;
text-align: center;
padding: 10px 0;
display: table-cell; /*To make sibling columns equal in height*/
}

#side-stuff{
display: block;
}

#content{
background-color: pink;
padding: 20px;
display: table-cell; /*To make sibling columns equal in height*/
}

#content-stuff{
width: auto;
height: auto;
}

#footer{
position: relative;
height: 80px;
margin-top: -80px; /* margin-top is negative value of height */
clear: both;
background-color: #222;
color: #fff;
padding: 10px;

}

</style>



<div id="wrapper">
<div id="header">
header content
</div>

<div id="main">

<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
</div>

<div id="content">
<div id="content-stuff">
content stuff
</div>

</div>

</div>
<div id="footer">
footer content
</div>
</div>

Upvotes: 0

Views: 91

Answers (2)

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

Hope this helps

 <style>
    #wrapper{
    margin:0px auto;
    padding:0px;
    width:1000px;
    }

    #header
    {
    margin:0px;
    padding:0px;
    width:1000px;
    height:100px;
    background-color:lavender;
    }
    #content
    {
    margin:0px;
    padding:0px;
    width:1000px;
    }

    #side
    {
    margin:0px;
    padding:0px;
    width:250px;
    height:700px;
    background-color:grey;
    float:left;
    }
    #main
    {
    margin:0px;
    padding:0px;
    width:750px;
    height:700px;
    float:right;
    }
    #main1
    {
    margin:0px;
    padding:0px;
    width:750px;
    height:650px;
    background-color:pink;
    float:right;
    }
    #footer
    {
    margin:0px;
    padding:0px;
    width:750px;
    height:50px;
    background-color:black;
    float:right;
    }

    </style>
    <div id="wrapper">
            <div id="header"> Header </div>
        <div id="content">
            <div id="side">Side</div>
            <div id="main">
                <div id="main1">Main</div>
                <div id="footer">Footer</div>
            </div>
        </div>
    </div>

Upvotes: 1

Ely
Ely

Reputation: 29

put the div of the footer inside the div of the side 

<div id="side">

    <div id="side-stuff">
        sidebar stuff
    </div>

    <div id="footer">
        footer content
    </div>
</div>

Upvotes: 1

Related Questions