how to create this css?

Question

I have to follow divs:

   <div id="cont">
      <div class="row">
        <div class="col">1</div>
        <div class="col">example.com</div>
        <div class="col">text1</div>                   
        <div class="col"><b>text1</b></div>
      </div>  
      <div class="row">
        <div class="col">2</div>
        <div class="col">example2.com</div>
        <div class="col">text2</div>                   
        <div class="col"><b>text2</b></div>
      </div>  
    </div>

I would like to understand how to write the css for this "table".

i think class="col" needs float:left (becase each div must to be consecutive, horizontally), but how to

write class="row" ?

EDIT: I don't want a table, I wrote "table" because I need the same think of:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

but I need to do that only using divs.

If it's tabular data, use a table! – Kyle Oct 28 '11 at 08:55 — Kyle, Oct 28 '11 at 08:55

score 2 · Answer 1 · answered Oct 28 '11 at 08:56

2

Just use a table

When people say you shouldn't use tables, they are referring to layout structure. It is still fine to use it in this case, they are not evil!

answered Oct 28 '11 at 08:56

Curtis

101,612
66
270
352

I need to use divs, please read the edit in the original message – Dail Oct 28 '11 at 09:01
@Dail - Why? Is this markup not going to be used to store tabular data? – Curtis Oct 28 '11 at 09:12

score 2 · Answer 2 · answered Oct 28 '11 at 08:57

2

Use the CSS as shown below. These make your DIVs look like a table ( http://jsfiddle.net/H7NQV/). Your example looks like tabular data, so I recommend using a table though.
The <table> tag supports features which are not (yet) implemented in CSS, such as colspan and rowspan.

.cont {
    display: table;
}
.row {
    display: table-row;
}
.col {
    display: table-cell;
}

answered Oct 28 '11 at 08:57

Rob W

341,306
83
791
678

I need to use divs, please read the edit in the original message – Dail Oct 28 '11 at 09:00
1

@Dail My answer is not altering your HTML code. I added the CSS to implement your idea using DIVs, while offering a tip to switch to tables. **DIVs-only table: http://jsfiddle.net/H7NQV/** – Rob W Oct 28 '11 at 09:02

score 1 · Accepted Answer · answered Oct 28 '11 at 08:58

1

I think your css should be:

.row{
    display:block;
}

.col{
    display:inline-block;
    width:200px;/*for example*/
}

answered Oct 28 '11 at 08:58

Eugene

1,690
3
16
30

score 0 · Answer 4 · answered Oct 28 '11 at 08:58

0

How is your class rowsupposed to be rendered? I think it should look correct if you don't configure it at all. Anyways, you should use a table for tabular data.

answered Oct 28 '11 at 08:58

dwalldorf

1,379
3
12
21

I need to use divs, please read the edit in the original message – Dail Oct 28 '11 at 09:00
1

Why do you _need_ to use divs? – Kyle Oct 28 '11 at 09:10

score 0 · Answer 5 · answered Oct 28 '11 at 09:03

0

Try reading this post about CSS tables vs. HTML tables. This should answer your question on how to do it. Also it will make you consider whether you get any real value from using css tables instead of just plain table in your case.

answered Oct 28 '11 at 09:03

Andrius

423
4
11

how to create this css?

5 Answers5

Linked