How to set rowspan/colspan using CSS?

Hello,
I am looking for a way to reorder DIVS in a specific order.
my html code is this:

<div class="title">title </div>
<div class="year">year</div>
<div class="abstract">abstract</div>
<div class="image">image</div>

this is the equivalent table I am trying to process from HTML code:

<table>
<tr>
<td rowspan="2">image</td><td>title></td><td>year</td>
</tr>
<tr>
<td colspan="3">abstract</div>
</tr>
</table>

HTML:

The task is to make from CSS what I achieve easily with HTML code.
Please help me with this one. Thanks

 

I don't think there is any CSS alternative at the moment. At CSS3 there is a multi-column thing (http://www.w3.org/TR/css3-multicol/) but it's not supported by most browsers so I would stick with the HTML version. Any reason you want to remove the HTML?

 

yes. the reason is I needed to write a template system. so I thought the best way is to five each item a DIV and then, using CSS manipulate its structure.
But I guess this approach is wrong, causr the CSS language is not structure language as HTML.
I found an alternative to mix CSS anf HTML, and I will use it.
Thank you for your help.

 

you can't, colspan / rowspan is HTML tags.

 

1) if that's data in a orderly set of rows and columns, you should be using the table... It's called tabular data for a reason.

2) If those DIV are the headings to their columns, then they should be TH inside the table...

But yeah, Colspan/rowspan is structure, NOT presentation... so it's HTML, not CSS. For too long the lines were blurred so we 'expect' CSS to have much of HTML's functionality when flat out that's not what it's for! (Can't wait to see how the CSS 3tards start abusing generated content)

Do you have an example of your FULL dataset? I mean, why is your images header spanning two columns? Your second span - shouldn't that be a 4 and not a 3 since the TR above it has three td with a 2 span on one of them?

I'd need to see the headers and at least three rows of content to even come close to figuring out what markup you should be using - remember, content should dictate your markup - not presentation, not layout - CONTENT, since HTML is to say what things ARE, NOT how they are going to appear.

 

you can control the height of the element u need care the float and height but its complex try ul li or dt dl

 

"CSS 3tards" LOL.... Thats a good term actually...I anticipate there to be many

 

Oh there already are - see all the people using the -moz and -webkit properties without the ACTUAL CSS3 equivalents.