How to align 3 divs side by side horizontally (left center right) inside another div?

Align 3 divs in one line left-center-right side by side in horizontal without having to define explicit sizes that is without using width.
Left should be aligned most to the left edge, right to the right edge and center to the center(middle of left and right div as shown below.

[[LEFT]           [CENTER]           [RIGHT]]

For this (3 divs side by side horizontally (left center right) inside another div) here is the quick and simple css. Hope this will be useful 🙂
HTML

left
right
center

CSS

.wrap{
    text-align:center
}
.left{
    float: left;
    background:grey
}
.right{
    float: right;
    background:red
}
.center{

    background:green;
    margin:0 auto;
   display:inline-block
}

I have implemented this “align 3 divs left center right inside another div” on one of my web app “Nepali calendar“. here is screenshot of it.

Subscribe by email below and please follow me on http://www.twitter.com/myashesh.

I Will Sent You An Email Immediately After You Subscribe To Confirm, Make Sure To Click The Link In That Email.

Ashesh

सयौ थुङ्गा फूलका हामी एउटै माला नेपाली, Welcome to my webpage. I'm from the Himalayan Country of Nepal. Well talking about me, I like mostly Web programming and Designing and furthermore I like Philosophical literature, Photography, Social networking. And I am Romantic and Sentimental person to some extent. Read more...

View Comments