Suhani Mendapara Suhani Mendapara -4 years ago 115
HTML Question

CSS and HTML for this below view

I am left with 2 labels and can't find solution.

enter image description here

I have done this much HTML and CSS



<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">

<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>




Answer Source

Try this way:

  1. Takes care of vertical alignment (as it appears in your design)
  2. Content height adjusts according to adjacent column
  3. No browser issues as well
  4. Red and Green color using CSS - Hence no images required

.parent-container {
  width: 320px;
}

.box {
  border: 2px solid #000;
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.box__cell {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
  padding: 0 15px;
}

ul {
  padding: 0;
  list-style-type: none;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #000;
}

.b-red {
  background: red;
}

.b-green {
  background: green;
}

.t-green {
  color: green;
}

.text-right {
  text-align: right;
}

.list-item li {
  display: block;
}

.list-inline li {
  display: inline-block;
}
<div class="parent-container">
  <div class="box">

    <div class="box__cell box__cell--left">

      <div id="incoming_call">

        <ul class="list-item">
          <li class="t-green">Incoming Call</li>
          <li><b>00: 05</b></li>
        </ul>

      </div>

    </div>
    <div class="box__cell box__cell--left">

      <ul class="list-inline text-right">
        <li class="circle b-red">
        </li>
        <li class="circle b-green">
        </li>

      </ul>
    </div>

  </div>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download