CODEWITHSUNDEEP
htmlcss
user2135867
user2135867

Reputation:

Responsive css footer with 3 columns

i have this CSS code with media queries:

#footer-top {
    width:100%;
    height:480px;
    padding-top:10px;
    border-bottom:2px #000000 solid;
}
#footer-left {
    width: 290px;
    float: left;
    padding: 5px 15px;
    border-right:1px #000000 solid;
}
#footer-middle {
    width: 294px; /* Account for margins + border values */
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
    border-right:1px #000000 solid;
}
#footer-right {
    width: 270px;
    padding: 5px 15px;
    float: left;
}
#footer-bottom {
    clear: both;
    padding: 0 15px;
}

/* for 980px or less */
@media screen and (max-width: 980px) {
    #footer-left {
        width: 41%;
        padding: 1% 4%;
    }
    #footer-middle {
        width: 41%;
        padding: 1% 4%;
        margin: 0px 0px 5px 5px;
        float: right;
    }
    #footer-right {
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }
    #footer-bottom {
        padding: 1% 4%;
    }
}

/* for 700px or less */
@media screen and (max-width: 600px) {
    #footer-left {
        width: auto;
        float: none;
    }
    #footer-middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }
    #footer-right {
        width: auto;
        float: none;
    }
}

/* for 480px or less */
@media screen and (max-width: 480px) {
    #footer-right {
        display: none;
    }
}

so im trying to make my footer responsive for smaller screens etc.

I have created a fiddle here:http://jsfiddle.net/VMn7Y/ so you can see the full HTML too, but as you shrink the screen size the footer-right div is starting to display over the footer-bottom div. how do i make it so as the screen gets smaller, the footer-bottom div will be pushed down?

Upvotes: 2

Views: 2745

Answers (2)

Diego
Diego

Reputation: 116

First of all when you use media queries it's easier to get better results if you start from smaller screen sizes and work your way up.

I've fixed your fiddle, basically all you needed to do was change your width to 30% (or 27% in this case considering your padding)

Check it here: 

float:left;
padding: 5px 10px;
width:27%;

fixed jsfiddle

Upvotes: 0

daniel
daniel

Reputation: 1433

The addition to my comment to complete the answer is to remove the height:480px from #footer-top example --- > http://jsfiddle.net/VMn7Y/17/

Hope that's how you wanted it!

Upvotes: 1

Related Questions