Question

I have to create the following html, tried to use a div for the “last 24 hours” and “last month” and other divs with float left for other stuff, but it turned out all messed up.
please help me, what structure should use? table? divs? thks

Answer 1

This begs to be a grid. I’d use divs with some ready made grid, like the one from Bootstrap.

So for example it could look like this:

<div class="container">
  <div class="row">
    <div class="span6">LAST 24 HOURS</div>
    <div class="span6">LAST MONTH</div>
  </div>
  <div class="row">
    <div class="span6">283</div>
    <div class="span6">put a nested grid here</div>
  </div>
  <div class="row">
    <div class="span3">Facebook<div class="value">10%</div></div>
    <div class="span3">Twitter<div class="value">9%</div></div>
    <div class="span3">Foursquare<div class="value">7%</div></div>
    <div class="span3">Others<div class="value">5%</div></div>
  </div>
</div>

Then add some css classes and use that to float, change font sizes, colors, etc.