CODEWITHSUNDEEP
css
coder25
coder25

Reputation: 2393

how to create a table layout with float in css

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

Upvotes: 1

Views: 2678

Answers (2)

jzacharia
jzacharia

Reputation: 502

Scrap the span, assign a class to all 3 divs instead, then use float: on the class. If this doesn't work, you might have an easier time with display: table-.

http://www.w3schools.com/cssref/pr_class_display.asp

Upvotes: 0

dezman
dezman

Reputation: 19358

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; }.

Upvotes: 1

Related Questions