CODEWITHSUNDEEP
htmlcss
J.Zil
J.Zil

Reputation: 2449

Simulate rows with columns without tables

I have reasons for not wanting to use the html markup for a table but I am trying to create a structure of rows, each with three columns.

Here is what I tried: http://jsfiddle.net/3rpu0hb5/5/

HTML

  <div id="row">
    <div id="name">
        <h4>First Col</h4>
        <p>...</p>
    </div>
    <div id="detail">
        <h4>Middle Col</h4>
        <p>...</p>
    </div>
    <div id="location">
        <h4>Right Col</h4>
        <p>...</p>
    </div>
    </div>

CSS

.row .name {width: 200px; float:left;}
.row .detail {width: 200px; float:left;}
.row .location {width: 200px; float:left;}

What is missing here, because they still display below each other?

Upvotes: 0

Views: 2622

Answers (3)

Komal
Komal

Reputation: 2736

Your row is id not class , so replace '.' => '#'

#row #name {width: 200px; float:left;}
#row #detail {width: 200px; float:left;}
#row #location {width: 200px; float:left;}

Upvotes: 1

Kyle
Kyle

Reputation: 67184

You used a class selector .row instead of an id selector #row

#row div {width: 200px; float:left;}

http://jsfiddle.net/3rpu0hb5/11/

Upvotes: 4

Alex Char
Alex Char

Reputation: 33218

You can simple use display:table and display:table-cell trick:

#row{display:table;}
.disTableCell{display:table-cell;width: 200px;}

fiddle

Upvotes: 1

Related Questions