CODEWITHSUNDEEP
jqueryhtmlcss
BurebistaRuler
BurebistaRuler

Reputation: 6519

Align 3 div's with auto margins

I want to align 3 sections in one line: one left, one in center and one on right. How can I do that?

<div id="container">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

css:

#container{
    border:1px solid #ff0000;
    width: 100%;
    display: inline-block;
    height:auto;
  }

.div1{background: lime;border: 1px solid #ccc;width:100px;height: 100px; float: left}
.div2{background: yellow;border: 1px solid #ccc;width:100px;height: 100px; float:left}
.div3{background: orange;border: 1px solid #ccc;width:100px;height: 100px; float: right}

fiddle: http://jsfiddle.net/ux4DD/164/

Upvotes: 0

Views: 490

Answers (2)

Sowmya
Sowmya

Reputation: 26969

Add text-align:center to #container and remove float:left from the middle div

    #container{
    border:1px solid #ff0000;
    width: 100%;
     text-align:center; padding:0; font-size:0
  }
.div1{background: lime;border: 1px solid #ccc;width:100px;height: 100px; float: left; font-size:14px }
.div2{background: yellow;border: 1px solid #ccc;width:100px;height: 100px; display:inline-block; font-size:14px}
.div3{background: orange;border: 1px solid #ccc;width:100px;height: 100px; float: right; font-size:14px }

DEMO

Upvotes: 1

Avin Varghese
Avin Varghese

Reputation: 4370

Move div 3 to top of all div and add margin: 0px auto; to second div.

http://jsfiddle.net/ux4DD/165/

Upvotes: 1

Related Questions