What is the most cross-browser method of creating a specific layout?

A layout with left de kind of Data and right the data

[12inch]

Does anybody know a way to create a cross-browser method of creating a layout like this:

Titel: a titel
Artist: an artist
Release Date: a release date

This layout comes next to an image on the rightside.
And I want to give the left-side of the layout (titel, artist, release date) a fixed width, so that it alignes out.

I have tried it with lists en floats, but it doesn't seem to work. I think the best way is to do it with floats.

Does anyone know a good way for this?

[Birdman]

I think cross-browser wise, tables are the safest solution but I have stopped using them for layout long ago.

This is what I'd do.

<img style="float: right;" />
<div style="width: 50%;">
<ul>
<li>Titel: a titel</li>
<li>Artist: an artist</li>
<li>Release Date: a release date</li>
</ul>
</div>

<div style="clear: both;">&nbsp;</div>

Then repeat.

[12inch]

Hi Birdman, thanks for the reply. I think this will work, only the important part for me is that the leftside gets a fixed width of e.g. 100px. I can't get that part to work.

It doesn't seem to listen when I say width: 100px;
When I make it an inline or a block-level element, the browser won't listen. Strange enough, only IE5/Win listens.

[12inch]

This is my CSS code now:
div.productinfo {
margin: 0px;
padding: 0px;
border: 1px dashed #000;
background-color: #666;
}

div.rowproductinfo {
display: block;
margin-bottom: 15px;
}

div.productinfo span.left {
background-color: #f00;
margin: 0px;
padding: 0px;
width: 100px;
text-transform: uppercase;
}

div.productinfo span.right {
background-color: #00f;
font-weight: bold;
}

And this is my HTML code now:

<div class="productinfo">
<div class="rowproductinfo">
<span class="left">titel</span>
<span class="right">EXAMPLE TITLE</span>
</div>
<div class="rowproductinfo">
<span class="left">artiest</span>
<span class="right">Various Artists</span>
</div>
</div>

BUT, the span.left just doesn't want to be 100px wide.

[WibbleWobble]

Adding float: left to span.left fixes the width issue, though I expect it'll break something else. Display: block does the same, but it knocks the right span down a line, for obvious reasons (because its suddenly a block level element rather than an inline one).

I've only actually tested the two things above, very briefly.

[12inch]

Yes indeed WibbleWobble, that solved the problem.
Thanx!

[Birdman]

This should work but I don't have time to test it:

<img style="float: right;" />
<div style="width: 50%;">
<ul>
<li><span style="width: 100px;">Titel:</span> a titel</li>
<li><span style="width: 100px;">Artist:</span> an artist</li>
<li><span style="width: 100px;">Release Date:</span> a release date</li>
</ul>
</div>

<div style="clear: both;">&nbsp;</div>

[WibbleWobble]

Why put the image outside the div? If its all clustered together, it makes sense [markup logic] to nest it within. It should still float correctly?

[Birdman]

Correct you are. I still think that it's cleaner than what 12inch is using now. Like I said, I didn't test it either but it looks kosher. But yes, do put the image inside the div.

[drbrain]

I would do:

<table summary="Something here like song information"> 
<tr><th>Title<td>the title 
<tr><th>Artist<td>the artist 
<tr><th>Release Date<td>release date 
</table> 

[12inch]

I thought it worked, but unfortunately it doesn't. Afcourse it works in Mozilla and Opera and almost in IE6. But not in IE5.

My CSS code is as follows:
div.productinfo {
margin: 0px;
padding: 0px;
border: 1px dashed #000;
background-color: #666;
}

div.rowproductinfo {
margin-bottom: 25px;
}

div.rowproductinfo span.left {
margin: 0px;
padding: 0px;
float: left;
background-color: #f00;
width: 100px;
text-transform: uppercase;
}

div.rowproductinfo span.right {
float: left;
background-color: #fff;
}

And my html code is:
<div class="rowproductinfo">
<span class="left">titel</span>
<span class="right">TEST TITLE</span>
</div>

<div class="rowproductinfo">
<span class="left">artiest</span>
<span class="right">TEST ARTIST</span>
</div>

<div class="rowproductinfo">
<span class="left">release datum</span>
<span class="right">TEST RELEASE DATE</span>
</div>

In Mozilla and Opera the widths are all correct 100px, and the div.rowproductinfo are all below each other. Only in IE6 it puts 2 below each other but the rest of the div.productinfo's it ignores it. And in IE5 it doesn't at all.

Does anyone know how to fix this in IE?

[WibbleWobble]

Remove the bottom margin from rowproductinfo and use <br /> tags to place them below eachother ;)

(With the bottom margin, in IE6, the release date seems to have a gap caused by the bottom margin of the artist's rowproductinfo. But the artist one doesn't have the same gap.)

HTH.

[12inch]

Yes, you are right.
Now that is solved, thanx, I have one last problem (i hope).

I used a containerDIV called div.productinfo. At the beginning and the end of this containerDIV I used a spacerDIV.

<div class="productinfo">
<div class="spacer"></div>

-----
content
-----

<div class="spacer"></div>
</div>

In the spacerDIV is the code: clear: both;.
This is so that the div.productinfo contains the floatingDIVS. This is a hack, but now I need a hack for a hack?

Only in IE5 and IE6/Win there is a gap on the top and the bottom. Afcourse in Mozilla and Opera it is all correct.

[12inch]

The problem is solved.

I removed the spacerDIV's. They weren't necessary.