css - How to align 3 div's side by side in a footer Div(fixed position)

Question

This is feeling simple question but i'm struggling to get the exact output. I need to align 3 div's inside a div in footer. I have tried lot in google, and worked before too. but in footer fixed position its not working exactly.

In that image, white color container div for footer, red- left, green -right, and center.

here is my CSS :

div .footer-container
{
    height:53px;
    width:100%;
    position:fixed;
}

div .footer-container div .footer-left
{
    background-color:#f00;
    float:left;
    width:33%;
    height:31px;
}

div .footer-container div .footer-right
{
    background-color:#0f0;
    float:right;
    width:33%;
    height:31px;
}

div .footer-container div .footer-center
{
    background-color:#f0f;
    margin:0 auto;
    height:31px;
    width:33%;
}

here is HTML :

<div data-role = "footer" class="footer-container">
                <div>
                <div class="footer-left"></div>
                <div class="footer-right"></div>
                <div class="footer-center"></div>
                </div>
            </div>

What am doing wrong ? pls explain.

Answer 1

Get rid of all the floats. Add Display: inline-block to each of the three inner div's and adjust their width (to 32%) so they fit side by side.

    div .footer-container {    
        height:53px;     
        width:100%;     
        position:fixed; 
        background:#ccc 
    } 
    div .footer-container div .footer-left {     
        background-color:#f00;     
        display: inline-block;     
        width:32%;     
        height:31px; 
    } 
    div .footer-container div .footer-right {     
        background-color:#0f0;     
        display: inline-block;     
        width:32%;     
        height:31px; 
    } 
    div .footer-container div .footer-center {    
        background-color:#f0f;   
        display: inline-block;  
        margin:0 auto;     
        height:31px;     
        width:32%; 
    }​

Here is a FIDDLE

Answer 2

Make the middle div also float left. If that doesn't help, give the three child divs the property position:relative or position:static.

If that doesn't help, I suspect the problem lies in your html code.

Answer 3

This is because you center div don't have float,

Add this code to div .footer-container div .footer-center

float: left or float:right

Answer 4

use float:left

here's my code

<div style="width:100%; background-color:#FF6600">

<div style="width:33%; background-color:#FF1100; float:left">div1</div>
<div style="width:33%; background-color:#FF6655; float:left">div2</div>
<div style="width:33%; background-color:#FF3333; float:left">div3</div>

</div>

This should work, u lose 1% of width, but it works great for me.. the colors are just to see the 3 differnt divs.. u can put it into css..right?

Answer 5

Take the floats off the left and right and absolutely position them inside the container. This is assuming you want to accomplish what the image is showing. If you just want all 3 side by side your CSS works fine, just remove everything from the names but the class names (like I have it below)

http://jsfiddle.net/calder12/rnjtb/2

.footer-container
{
height:53px;
width:100%;
position:fixed;
}

.footer-left
{
background-color:#f00;
width:33%;
height:31px;
position:absolute;
bottom:0;
left:0;
}

.footer-right
{
background-color:#0f0;
width:33%;
height:31px;
position:absolute;
bottom:0;
right:0;
}

.footer-center
{
background-color:#f0f;
margin:0 auto;
height:31px;
width:33%;
}   ​