How to align 3 divs side by side in a div footer (fixed position)

Question

It feels like a simple question, but I'm struggling to get the exact result. I need to align 3 divs inside the div footer. I tried a lot on google and worked before. but in the footer, the fixed position does not work exactly.

In this image, the container is a white container for the 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 the 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 is doing wrong? explains pls.

Answer 1

Get rid of all the floats. Add Display: a built-in block for each of the three inner divs and adjust their width (up to 32%) to fit each other.

  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 FIDDLE

Answer 2

Make the middle div also float to the left. If this does not help, give the three child divs the position:relative or position:static property.

If this does not help, I suspect the problem is with your html code.

Answer 3

This is because you have no float in the center of the div,

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

 float: left or float:right 

Answer 4

use float: left

here is 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 and lose 1% of the width, but it works fine for me .. The colors are just to see 3 different divs .. u can put it in css..right?

Answer 5

Take the floats on the left and right and completely place them inside the container. It is assumed that you want to accomplish what the image shows. If you just want all 3 side by side, your CSS works just fine, just remove all of the names, but the class names (for example, I have them 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%; } ​