[css] DIV vullen met inline blokken

[jsiegmund]

De css topics blijven maar komen! Ik kon in de search wel enige relevante topics vinden, maar het lukt maar niet tot een oplossing te komen.

Ik heb een container div die een bepaalde afmeting heeft (zeg 400px). Die wil ik vullen met divjes waarvan ik de afmeting niet precies weet. Dit moeten blokjes zijn die gevuld worden met tekst. Die blokjes moeten naast elkaar komen. Allemaal niet zo moeilijk, maar de container div moet dus wel groter worden wanneer er een nieuwe regel divjes geplaatst word (omdat de vorige regel vol was).

De volgende code:

code:

    width: auto;
    height: auto;
    
    padding-top:20px;
    float: left;

    display: inline;
    display: -moz-inline-box;
    text-align:center;

doet het wel goed in IE, maar werkt niet in Moz. Wanneer ik dan display:inline weg laat werkt het wel in Moz, maar rekt ie in IE alle DIVjes op naar de complete breedte. Een width meegeven werkt ook, maar nog steeds elke div op een nieuwe regel. Float:left werkt dan weer geweldig in IE, maar dan wordt de container size in Moz weer overgeslagen...

Iemand die een werkend voorbeeldje heeft?

[JHS]

Op het parent element van degene die je float overflow: auto; toepassen (clearen)? Float is verder denk ik idd wel wat je zoekt .

edit:

Wat mophor zegt is ook een optie, en lijkt me beter als je tenminste wilt waarvan wat hij post is ( ) . Maar dat is misschien wel het probleem, het is niet echt duidelijk wat je wilt. Misschien een testcase'je maken?

[ Voor 47% gewijzigd door JHS op 18-04-2005 18:03 ]

[Verwijderd]

als je die hele float en inline bende weglaat en

code:

display: -moz-inline-box;
display: inline-block;
width: 200px; /*iets*/

doet, op een native inline element (span ofzo) dan komen ze allemaal naast elkaar en flowen ze door op de volgende regel en je omhullende div wordt groter.

Maar ik weet dus niet goed of dat nu je bedoeling was

[ Voor 99% gewijzigd door Verwijderd op 18-04-2005 17:57 ]

[bolleh]

dit werkt probleemloos hier in safari en firefox en internet explorer op de mac

code:

div#container{
    position: absolute;
    background-color: red;
    min-width: 400px;
    min-height: 400px;
}
div.stuff{
    position: relative;
    width: 90px;
    height: 90px;
    background-color: blue;
    margin: 5px;
}
div.stuff2{
    position: relative;
    width: 590px;
    height: 90px;
    background-color: blue;
    margin: 5px;
}

het voorbeeld van hierboven let ook niet op de kleuren

[ Voor 11% gewijzigd door bolleh op 18-04-2005 18:28 ]

[JHS]

Maar volgens mij wil hij juist de div's naast elkaar hebben?

Het enige wat ik nu zo snel kan bedenken is het volgende:

Cascading Stylesheet:

div#container {
    _height: 1%;
    overflow: auto;
}
div.all {
    width: 100px;
    float: left;
}
div#wide {
    position: relative;
    width: 500px;
}

HTML:

        <div class="all">
            <p>Tekst</p>
(...)
        <br style="clear: both">
        <div id="wide">
            <p>Tekst</p>
        </div>
        <div class="all">
            <p>Tekst</p>
        </div>
(...)

Zie testcase .

edit:

Ik was de _height: 1% overigens vergeten

[ Voor 21% gewijzigd door JHS op 18-04-2005 19:28 ]

[jsiegmund]

Dat met overflow:auto in het parent element werkt inderdaad. Native inline elementen lukt niet omdat ik de mogelijkheid moet hebben om width en height ook in te stellen. Het lijkt nu goed te gaan, als straks anders blijkt kom ik wel weer terug. Bedankt alvast.

[jsiegmund]

Het is toch nog niet helemaal tof, ik wil eigenlijk dat ze ook nog in het midden uitgelijnd worden en dat gaat zo lastig als je float: left gebruikt. Daar nog ideeen over?

[bolleh]

werkt dus niet...

[ Voor 144% gewijzigd door bolleh op 18-04-2005 19:17 ]

[Verwijderd]

misschien kan je even een tekening maken ofzo van wat je bedoelt, want ik kan er eigenlijk geen touw aan vastknopen

[jsiegmund]

Dit is wat ik nu heb: de witte border geeft de pagecontainer aan, de rode is de foto container waarin dan allemaal foto's komen te staan, nu toevallig met dezelfde afmetingen, maar dat hoeft niet.
Nu staan de foto's allemaal links tegen de fotocontainer gedrukt, maar heb ik liever gecentreerd.

[Verwijderd]

http://www.rikkertkoppes.com/troep/inlineblocks.htm

zo?

[JHS]

Dan op deze manier?

Cascading Stylesheet:

div#container {
    _height:1%;
    overflow: auto;
    text-align: center;
    margin: 0 auto;
}
div.all {
    display: -moz-inline-box; 
    display: inline-block; 
    width: 100px;   
    background-color: yellow;
}

Testcase .

edit:

Wat mophor zegt dus .

[ Voor 6% gewijzigd door JHS op 18-04-2005 20:29 ]

[Verwijderd]

overigens, waarom in dit geval eigenlijk moeilijkdoen met allemaal elementen, terwijl een zooi <img> achter elkaar eigenlijk precies hetzelfde doet (zie zelfde link, nu updated)

[ Voor 12% gewijzigd door Verwijderd op 18-04-2005 22:32 ]

[JHS]

Omdat we bij de oorspronkelijke vraagstelling niet wisten dat het om images ging .

[Vinzzz243]

niemand opgevallen dat wanneer er content in de blokken komt, deze neit wordt afgebroken op de aangegeven width?

[jsiegmund]

Dat is mij wel opgevallen. Het voorbeeldje van Morphor klopt niet helemaal; want deze spans hebben een vaste afmeting en dat is niet de bedoeling. Tevens komt er meer in de staan dan alleen plaatjes, dus dat gaat ook niet op. Ik kom er nu vast wel uit though

[Vinzzz243]

mocht je eruit zijn gekomen, post dan je oplossing ff voor de compleetheid van dit topic