Overflow probleem (HTML en CSS)

[bibbox3]

Geachte Tweakers,

tijdens het programmeren (HTML, PHP, CSS en SQL) stuitte ik op een probleempje. Toen ik een reeks div's in een moederdiv wilde plaatsen (de som van de breedtes van de dochterdiv's is weliswaar groter dan de breedte van de moederdiv) werd de laatste div ( die er dus niet op geraakte ) naar beneden geplaatst, onder de andere div's. Ik heb display: inline al geprobeerd bij alle dochterelementen, maar dit werkt niet. Ook heb ik aan de moederdiv een overflow: auto gegeven. Dit lost het probleem niet op, ik kan nu gewoon naar beneden scrollen naar de div die onderaan geplaatst werd. Hoe kan ik al deze dochterdiv's op één lijn plaatsen en een horizontale scrollbar laten verschijnen om naar rechts te scrollen om de laatste dochterdiv volledig te kunnen bekijken?
[code=PHP
<div id="rankings">
<div id="ranking_list">
<div id="first">
<div id="image_first">
<img class="first" src="<?php echo $address_first; ?>"/>
</div>
<div id="data_first">
<p id="first_rank">N&deg1 </p><br/>
<p id="first_name"><?php echo $name_first; ?></p><br/>
<br/><br/>
<div id="votes"><p id="first_votes"><?php echo $votes_first; ?></p></div>
</div>
</div>

<div id="second">
<div id="image_other">
<img class="other" src="<?php echo $address_second; ?>"/>
</div>
<div id="data_other">
<p id="other_rank">N&deg2 </p><br/>
<p id="other_name"><?php echo $name_second; ?></p><br/>
<br/><br/>
<div id="votes"><p id="other_votes"><?php echo $votes_second; ?></p></div>
</div>
</div>

<div id="third">
<div id="image_other">
<img class="other" src="<?php echo $address_third; ?>"/>
</div>
<div id="data_other">
<p id="other_rank">N&deg3 </p><br/>
<p id="other_name"><?php echo $name_third; ?></p><br/>
<br/><br/>
<div id="votes"><p id="other_votes"><?php echo $votes_third; ?></p></div>
</div>
</div>
</div>
</div>
]
[code=CSS
#rankings{
position: relative;
top: 430px;
}
#ranking_list{
border: solid blue 1px;
position: relative;
width: 804px;
left: 50%;
margin-left: -400px;
height: 164px;
padding: 1px;
overflow: auto;
}
#first{
float: left;
padding: 5px;
border: solid black 1px;
height: 150px;
margin: 1px;
display: inline;
}
#second{
float: left;
border: solid black 1px;
padding: 3px;
height: 154px;
margin: 1px;
display: inline;
}
#third{
float: left;
border: solid black 1px;
padding: 3px;
height: 154px;
margin: 1px;
display: inline;
}
img.first{
height: 100%;
}
#image_first{
border: solid red 1px;
height: 148px;
width: 125px;
background: #D8D8D8;
text-align: center;
float: left;
}
#data_first{
height: 150px;
float: left;
padding: 5px;
}
p{
display: inline;
}
p#first_rank{
font-size: 40px;
font-weight: 900;
}
p#first_name{
font-size: 25px;
font-weight: 600;
}
p#first_votes{
font-size: 20px;
float: bottom;
}
img.other{
height: 100%;
}
#image_other{
border: solid red 1px;
height: 150px;
width: 125px;
background: #D8D8D8;
text-align: center;
float: left;
}
#data_other{
height: 150px;
float: left;
padding: 5px;
}
p#other_rank{
font-size: 30px;
font-weight: 600;
}
p#other_name{
font-size: 20px;
font-weight: 600;
}
p#other_votes{
font-size: 16px;
}
#votes{
position: absolute;
bottom: 0px;
margin: 5px;
}
]

Alvast bedankt,
Bibbox3

[Jap_]

Hey Bibbox,

Je code staat er niet netjes in, maar volgens mij is dit wat je zoekt:

http://jsfiddle.net/h6c4Q/

In het kort:

HTML:

<div id="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

Cascading Stylesheet:

#container {
    width: 200px;
    white-space: nowrap;
    overflow: scroll;
}
.block {
    width: 100px;
    height: 100px;
    display: inline-block;
}

In principe maak je van je #first,#second,#third etc. een inline-block ipv ze te floaten. Vervolgens zeg je tegen de container dat hij inline elementen niet naar een nieuwe regel moet zetten en zet je je overflow op scroll.
Inline-block is trouwens nog wat buggy in IE6/7 (bron) dus als je die wilt ondersteunen moet je daar even op letten.

Ik raad je daarnaast aan even naar css classes te kijken. Er staat een hoop dubbele code in je voorbeeld. Zo kan je je #first, #second, #third elementen allemaal de class "block" geven (oid) en in je css één keer al die blokken stylen:

HTML:

<div id="first" class="block"></div>
<div id="second" class="block"></div>
... etc

Cascading Stylesheet:

.block {
    border: solid black 1px;
    height: 150px;
    etc..
}

[ Voor 23% gewijzigd door Jap_ op 30-10-2012 12:21 . Reden: html/css in post ipv fiddle ]

[bibbox3]

Super bedankt Jap ,
alles is perfect opgelost. Moest slechts white-space: nowrap; toevoegen aan m'n container .
Je hebt zeker gelijk wat mijn professionaliteit betreft op gebied van styling, maar ik ben nog slechts een beginner en CSS is nooit m'n lievelings taal geweest.
Nogmaals zeer wel bedankt!
Grtz Bibbox