how to create a table layout with float in css

Question

I want to create 3 divs inside outer div.The outer div is 72%.The three inner span with classes first,second,third should be 24%.

   <div id="outer">
   <div id="inner">
      <div class="content">
      <span class="first">
      HELLO
      </span>
      </div>

    <div class="content">
      <span class="second">
      pRERNA
          </span>
      </div>

   <div class="content">
      <span class="third">
      gOLANI
       </span>
    </div>

css

#inner
   {
      width:72%;   
   }

    div.content span.first
    {
        display:block;
        float:left;
        width:33%;

    }
    div.content span.second
    {
        clear:left;
        display:block;
        float:right;
        width:33%;

    }

I want to do this with the help of float property of css

Answer 1

I would get rid of the spans and give the first second and third divs a class of "content" and then in your css put: .content { float: left; }.