how to simulate this table using divs?

Question

I have this screenshot. The one above is using div. The one below is using table. I tried making the one above look similar to the one below but I'm getting nowhere.

My aim is to simulate a stacked horizontal bar. I've found similar CSS examples on the net but it won't let me add the text inside the "box".

Code Example

br.clear {
  float: clear;
}

div.fullwidth {
  border: 1px solid black; 
  height: 40px;
  max-width: 100px;
}
div.available {
  background-color: #22BB22;
  color: #111111;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}
div.notavailable {
  background-color: #222222;
  color: #DDDDDD;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}

<div class="fullwidth" style="height: 40px;">
  <div class="available" width="50px">10</div>
  <div class="notavailable" width="50px">10</div>
  <br class="clear" />
</div>
<hr>
<table>
  <tr>
    <td style="background-color: green; width: 50px; text-align: center;">10</td>
    <td style="background-color: blue; width: 50px; text-align: center;">10</td>
</table>

Basically, you want the two divs to fit the `.fullwidth`? Will there ever be more than two divs? Will the divs size be always the same? — xpy, Feb 11 '16 at 11:52
http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width — Paulie_D, Feb 11 '16 at 12:10

score 1 · Answer 1 · answered Feb 11 '16 at 07:22

br.clear {
  float: clear;
}

div.fullwidth {
  border: 1px solid black; 
  height: 40px;
  max-width: 100px;
}
div.available {
  background-color: #22BB22;
  color: #111111;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}
div.notavailable {
  background-color: #222222;
  color: #DDDDDD;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}

<div class="fullwidth" style="height: 40px;">
  <div class="available" width="50px">10</div>
  <div class="notavailable" width="50px">10</div>
  <br class="clear" />
</div>
<hr>
<table style="border:solid 1px #000;" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: green; width: 20px; height: 40px; text-align: center;">10</td>
    <td style="background-color: blue; width: 20px; height: 40px; color: #fff; text-align: center;">10</td>
    <td style="width: 60px;"></td>
</table>

I want the one above (see screenshot) to look the same to the one below. not the other way around. thanks though! — mrjayviper, Feb 11 '16 at 07:24

score 1 · Answer 2 · answered Feb 11 '16 at 07:23

Something like this?

 div.fullwidth {
                /*border: 1px solid black; */
                height: 20px;
                max-width: 100px;
            }
            div.available {
                background-color: #22BB22;
                color: #111111;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                width:49%

            }
            div.notavailable {
                background-color: #222222;
                color: #DDDDDD;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                 width:49%;
                 border-left:2px solid #fff

            }

DEMO

score 1 · Accepted Answer · answered Feb 11 '16 at 07:33

This is what I did:

br.clear {
  float: clear;
}

div.fullwidth {
  display: table;
}

div.available {
  background-color: green;
  color: #111111;
  text-align: center;
}

div.notavailable {
  background-color: blue;
  color: #DDDDDD;
  text-align: center;
}

.fullwidth div {
  width: 53px;
  height: 20px;
  display: table-cell;
  margin: 2px;
  border-spacing: 5px;
  border: solid 1px white;

    color:black;
}

Here is the JSFiddle demo

how to simulate this table using divs?

3 Answers3