Saturday , February 24 2018

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

http://www.ashesh.com.np/wp-content/uploads/2013/09/css-magic-images.jpegAlign 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

User Rating: 4.75 ( 2 votes)

Check Also

IDM 6.30 Build 1 Multilingual + Crack 2017 | 2018 (100% working)

IDM 6.30 Build 1 is the most popular and very powerful software that can download …

Leave a Reply

Your email address will not be published. Required fields are marked *