CODEWITHSUNDEEP
jqueryhtmlcss
yeppe
yeppe

Reputation: 689

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>

Upvotes: 0

Views: 706

Answers (1)

Mukesh Ram
Mukesh Ram

Reputation: 6328

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>

Upvotes: 3

Related Questions