table-like structure

hi all

i'm using css and divs to create a table-like effect, as such:

<div style="float: left; width: 50%; clear: both">Company Name</div>
<div style="float: right; width: 50%; clear: both">Acme</div>
<div style="float: left; width: 50%; clear: both">Email</div>
<div style="float: right; width: 50%; clear: both">info@acme.com</div>

all well and good, until i get an over-long company name, which wraps the text onto the next line, so that the wrapped text lines up with the "Email" header. i don't mind that the text wraps, but i'd like the next "row" to be pushed down by the wrapped text, if possible

any suggestions?

TIA

I'm not being funny here, but the content/structure suggests to me that you should actually use an HTML table. (And I'm a CSS bloke!).

thanks prototypecoding, i'm aware that this is tabular data, and i'd be forgiven for using a table just an academic exercise really, i'm just interested in whats causing the behaviour, and possible solutions! thanks for your response

dave

Hmmm, this seems to work pretty well in IE and FF:

<div style="float: left; width: 49%;">Company Name</div>
<div style="float: right; width: 49%;">Acme Acme Acme Acme Acme Acme</div>
<div style="width:100%; clear: both"></div>
<div style="float: left; width: 49%;">Email</div>
<div style="float: right; width: 49%;">EMAIL REMOVED - Send PM to This User Instead</div>

Yeah... but you're missing the point.

If you did it this way, sure it would be an acheivement but it would be wrong. It would be just as wrong as using tables for layout. The problem arrises when tags are used to do jobs they were never meant to do. Tables for lauout is wrong and CSS controlled div tags for displaying tabular data is wrong.

Hope this clears things up.