[CSS] Floating divs verkeerd gedefinieerd?

[Reveller]

Ik heb de volgende html en css:

HTML:

<style>
#story_list .story {display: block;}
#story_list .date {float: left;}
#story_list .comments {float: right;}
</style>

<div id="story_list">
  <div class="story">
    <div class="date">14/05/2006 16:13:21: </div>
    <div class="title"><a href="nieuws/87">Titel van artikel</a></div>
    <div class="comments">6</div>
  </div>
  <div class="story">
    <div class="date">13/05/2006 13:16:21: </div>
    <div class="title"><a href="nieuws/88">Hier nog een titel</a></div>
    <div class="comments">2</div>
  </div>
</div>

Met bovenstaande css zou ik verwachten dat het er als volgt uit ziet:

code:

14/05/2006 16:13:21: Titel van artikel                         6
13/05/2006 13:16:21: Hier nog een titel                        2

Maar het ziet er echter als volgt uit:

code:

14/05/2006 16:13:21: Titel van artikel                         
13/05/2006 13:16:21: Hier nog een titel                        6
                                                               2

Ik het al geprobeerd om de story class een clear:both mee te geven, maar dat hielp niets. Wat doe ik verkeerd?

[Verwijderd]

geef je divs eens een display : inline mee? nu zijn ze nog block denk ik

[Verwijderd]

Duw het in een tabel.

[XWB]

Cascading Stylesheet:

    #story_list .date 
    {
        float: left;
    }

    #story_list .title 
    {
        float: left;
    }   
    
    #story_list .comments 
    {
        text-align: right;
    }

Die laatste hoeft geen float te zijn, die sluit nl mooi aan tegen de floats.

[ Voor 19% gewijzigd door XWB op 30-07-2006 15:21 ]

[Victor]

Verwijderd schreef op zondag 30 juli 2006 @ 15:20:
Duw het in een tabel.

Met stom ^^

Je bent hier in DIV's een tabel aan het nabouwen, waarmee alle semantische waarde verloren gaat. Gewoon zo doen:

HTML:

<table>
    <thead>
        <tr>
            <th>Datum</th>
            <th>Titel</th>
            <th>Reacties</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>01/01/1970</td>
            <td>Artikel</td>
            <td>123</td>
        </tr>
        <tr>
            <td>01/01/1970</td>
            <td>Artikel</td>
            <td>123</td>
        </tr>
    </tbody>
</table>

[Reveller]

^^ ook met stom

Ik ben zo hard bezig mijn site om te zetten naar css dat ik soms vergeet dat er ook nog gewoon tabellen bestaan om data in te presenteren. King_Loui heeft gelijk dat de symantische waarde niet verloren mag gaan. Ook bedankt voor de css oplossing (weer wat geleerd), maar ik ga voor een tabel!

[BikkelZ]

Wel herkenbaar dat CSS-fanatisme wat op een gegeven moment toeslaat....maar ik ben al weer genezen