Nepali CalendarMulticultural nepali calendar with events and festivals.

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

css magic imagesAlign 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

<div class="wrap">
  <div class="left">
      left
  </div>
  <div class="right">
      right
  </div>
  <div class="center">
      center
</div>
</div>

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.
Nepali calendar
Subscribe by email below and please follow me on http://www.twitter.com/myashesh.

To get regular updates from my blog, please subscribe by email.
Enter email:

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



One Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.