CODEWITHSUNDEEP
htmlcss
Muzz
Muzz

Reputation: 687

absolute positioning a footer

I have a container containing one float left and one float right div.

I want to position a footer on the right side div on the floor. Both left and right divs need to expand relative to the tallest div and the footer should stay on the bottom of the right side div at all times.

How can I achieve this? Can someone please provide me an example or point me to tutorial?enter image description here

EDIT:

OK, sorry for my terrible pic but I think you get the idea. Also, if the left div grows taller than the right, the right div should grow with the left and vise versa. If the content on the right grows, it should not overflow onto the footer.

EDIT

This is a screenshot of the latest attempt by jackthetipper. The footer is not yet on the bottom of the right side div even though content has been added to the left.enter image description here

Upvotes: 0

Views: 83

Answers (2)

jacktheripper
jacktheripper

Reputation: 14219

Live demo. I believe this is what you are looking for:

HTML

<div id="wrapper">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="rightfooter">Text</div>
</div>
​

CSS

#wrapper {
    width: 300px;
    height: 200px;
}
#left{
    background-color: #82ff68;
    float: left;
    width: 50%;
    height: 100%;
}
#right{
    background-color: #ff5c4a;
    float: left;
    width: 50%;
    height: 100%;
}
#rightfooter {
    height: 1em;
    width: 50%;
    background-color: blue;
    float: right;
}​

EDIT after comments

Demo with footer in the div

EDIT 2 after comments

Second demo with expanding heights (dependant on each other)

Upvotes: 0

bPratik
bPratik

Reputation: 7019

Follow http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ for a good understanding of the layout you are after.

Now to achieve the footer in right div, change the HTML in of the finished layout http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html to something like:

<div id="sidebar">
<div>
    <h2>Column 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
    <ul>
        <li><a href="/">Link 1</a></li>
        <li><a href="/">Link 2</a></li>
        <li><a href="/">Link 3</a></li>
        <li><a href="/">Link 4</a></li>
        <li><a href="/">Link 5</a></li>
        <li><a href="/">Link 6</a></li>
        <li><a href="/">Link 7</a></li>
        <li><a href="/">Link 8</a></li>
        <li><a href="/">Link 9</a></li>
        <li><a href="/">Link 10</a></li>
        <li><a href="/">Link 11</a></li>
        <li><a href="/">Link 12</a></li>
        <li><a href="/">Link 13</a></li>
        <li><a href="/">Link 14</a></li>
        <li><a href="/">Link 15</a></li>
    </ul>
</div>
<div id="sub-footer">
    <p>Footer</p>
</div>
</div>

And then add the following CSS:

# {
    padding: 5px 10px;
    background: #CC9;
    margin-top: auto;
    margin-bottom: 0;
    position: fixed;
    bottom: 0;
    width: 205px;
}

Upvotes: 1

Related Questions