yeppe yeppe - 5 months ago 15
jQuery Question

Align div in one line, extreme left, middle , extreme right

I have mainly 3 divs under the parent class wrapped_inside. I want to align all 3 divs in a single row. One at the middle rest of the two divs at extreme left and right ends. Below code works fine in all browser except IE.

Please note that the below css and html page is part of a larger html. I have copied only the important parts for the demo example attached below.



.wrapped_inside div:nth-child(3) {
position: relative;
display: block;
}
.wrapped_inside div:nth-child(3) div:nth-child(1) {
float: left;
padding-top: 5px;
}
.wrapped_inside div:nth-child(3) div:nth-child(2) {
padding: 10px;
position: absolute;
left: 50%;
}
.wrapped_inside div:nth-child(3) div:nth-child(3) {
// left: 0%;
float: right;
padding-top: 5px;
}

<div class="wrapped_inside">
<div class="arw"></div>
<div class="arw"></div>
<div class="arw">
<div class="type-4">
<div id="one">footer text1</div>
</div>
<div class="type-2">
<div class="two">
<a href="javascript:void(0)">
<span >text2
</span>
</a>
</div>
</div>
<div class="type-6">
<div >
<a href="#">
<span class="menu-left">0</span>
</a>

</div>
</div>
</div>
</div>




Answer

Remove this div <div class="col-sm-6"></div>

.wrapped_inside div:nth-child(3) {
  position: relative;
  display: block;
}
.wrapped_inside div:nth-child(3) div:nth-child(1) {
  float: left;
  padding-top: 5px;
}
.wrapped_inside div:nth-child(3) div:nth-child(2) {
 padding: 10px;
  position: absolute;
  left: 50%;
}
.wrapped_inside div:nth-child(3) div:nth-child(3) {
  // left: 0%;
  float: right;
  padding-top: 5px;
}
<div class="wrapped_inside">
  <div class="arw"></div>
  <div class="arw"></div>
  <div class="arw">
    <div class="type-4">
      <div  id="one">footer text1</div>
    </div>
    <div class="type-2">
      <div class="two">
        <a href="javascript:void(0)">
          <span >text2
        </span>
        </a>
      </div>
    </div>        
    <div class="type-6">
      <div >
            <a href="#">
              <span class="menu-left">0</span>
            </a>
        
      </div>
    </div>
  </div>
</div>

Comments