Floating divs komen op nieuwe regel in FF? - Softwareontwikkeling

vrijdag 27 februari 2009 15:32

Acties:

0 Henk 'm!

Prutser 1e klasse

Topicstarter

Ik ben niet echt een CSS guru, maar als developer krijg je daar wel eens mee te maken en geheid dat ik dan altijd tegen problemen op loop..

Ik heb een heel simpel stukje HTML wat precies doet wat ik wil, namelijk drie divjes op een rij.

HTML:

1
2
3

    <div style="float:left;border-style:solid;border-width:1">test 1</div>
    <div style="float:left;border-style:solid;border-width:1">test 2</div>
    <div style="border-style:solid">test 3</div>

Maar zodra ik deze divjes een vaste breedte meegeef komt in ff de laatste div onder de eerste twee te staan.

HTML:

1
2
3

    <div style="width:160px;float:left;border-style:solid;border-width:1">1</div>
    <div style="width:160px;float:left;border-style:solid;border-width:1">2</div>
    <div style="width:160px;border-style:solid">3</div>

Iemand een idee hoe dat komt (in IE werkt het wel).

Ik ben er wel achter dat wanneer ik de width van de laatste div weghaal, dat alles wel netjes achterelkaar gepositioneerd wordt.
Volgens w3schools moet er pas worden afgebroken wanneer er niet genoeg ruimte is. Maar ik heb veel meer ruimte dan (3x160+5) 485.

[ Voor 13% gewijzigd door Standeman op 27-02-2009 15:46 ]

The ships hung in the sky in much the same way that bricks don’t.

vrijdag 27 februari 2009 16:19

Acties:

0 Henk 'm!

Kiphaas7

Omdat je de derde niet float?

. Normaal gesproken worden alle block elementen allemaal op een nieuwe regel gezet.

[ Voor 55% gewijzigd door Kiphaas7 op 27-02-2009 16:20 ]

vrijdag 27 februari 2009 16:46

Acties:

0 Henk 'm!

Standeman

Prutser 1e klasse

Topicstarter

Kiphaas7 schreef op vrijdag 27 februari 2009 @ 16:19:
Omdat je de derde niet float? . Normaal gesproken worden alle block elementen allemaal op een nieuwe regel gezet.

Dat snap ik niet helemaal. Wat heeft het floaten met de width te maken? Zonder width floaten ze wel allemaal netjes naast elkaar, maar met de width gezet niet?

Dus als ik drie kolommen, twee rijen wil hebben moet het er alsvolgt uitzien:

HTML:

    <div style="width:160px;float:left;border-style:solid;border-width:1">test 1</div>
    <div style="width:160px;float:left;border-style:solid;border-width:1">test 2</div>
    <div style="width:160px;float:left;border-style:solid">test 3</div>
    <div><!--empty new line seprator--></div>
    <div style="width:160px;float:left;border-style:solid;border-width:1">test 1</div>
    <div style="width:160px;float:left;border-style:solid;border-width:1">test 2</div>
    <div style="width:160px;float:left;border-style:solid">test 3</div>

Even proberen.

[ Voor 22% gewijzigd door Standeman op 27-02-2009 16:51 ]

The ships hung in the sky in much the same way that bricks don’t.

vrijdag 27 februari 2009 16:48

Acties:

0 Henk 'm!

disjfa

be

Kan, maar als ik zaken float regel ik nooit dat ik een vast afkader heb. Waar zou je dat voor gebruiken. Straks word het design aangepast en dan staat het raar in een hoekje. Je kanze ook gewoon lekker binnen de container laten floaten.

Nu misbruik je gewoon divjes om wat lijkt tabulaire data op te bouwen

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 27 februari 2009 16:52

Acties:

0 Henk 'm!

Standeman

Prutser 1e klasse

Topicstarter

disjfa schreef op vrijdag 27 februari 2009 @ 16:48:
Kan, maar als ik zaken float regel ik nooit dat ik een vast afkader heb. Waar zou je dat voor gebruiken. Straks word het design aangepast en dan staat het raar in een hoekje. Je kanze ook gewoon lekker binnen de container laten floaten.

Nu misbruik je gewoon divjes om wat lijkt tabulaire data op te bouwen

Niet helemaal. Ik gebruik ze wel om tabulaire data in te laten scrollen. In de DIV komt dan ook een tabelletje met data en een overflow:auto.

The ships hung in the sky in much the same way that bricks don’t.

vrijdag 27 februari 2009 17:37

Acties:

0 Henk 'm!

Da Weef

Alsjeblieft geen stijlen meer in tags, het doet pijn aan mijn ogen...

HTML:

<head>
<style type="text/css" media="screen">
div{
    float:left;
    border: 1px solid;
    width: 160px;}

div.newline {
    float:none;
    clear:both;
    border:none;}
</style>
</head>
<body>
    <div>1</div> <div>2</div> <div>3</div>
    <div class="newline">4</div>
    <div>5</div> <div>6</div> <div>7</div> <div>8</div>
    <div class="newline">9</div>
    <div>10</div>
</body>
</html>

.

zaterdag 28 februari 2009 00:43

Acties:

0 Henk 'm!

Standeman

Prutser 1e klasse

Topicstarter

Da Weef schreef op vrijdag 27 februari 2009 @ 17:37:
Alsjeblieft geen stijlen meer in tags, het doet pijn aan mijn ogen...

HTML:

<head>
<style type="text/css" media="screen">
div{
    float:left;
    border: 1px solid;
    width: 160px;}

div.newline {
    float:none;
    clear:both;
    border:none;}
</style>
</head>
<body>
    <div>1</div> <div>2</div> <div>3</div>
    <div class="newline">4</div>
    <div>5</div> <div>6</div> <div>7</div> <div>8</div>
    <div class="newline">9</div>
    <div>10</div>
</body>
</html>

Styles in de tags deed ik alleen om alles ff in 1 file te houden. Ik gooi die styles echt wel in een .css file hoor..
* Standeman stelt Da Weef gerust.

The ships hung in the sky in much the same way that bricks don’t.

zaterdag 28 februari 2009 11:34

Acties:

0 Henk 'm!

Kiphaas7

HTML:

1	<div><!--empty new line seprator--></div>

He? Doe je dat nou om witruimte te creeeren? Zoja, dan is dat een schoolvoorbeeld van nutteloze markup in ieder geval.

Ontopic:

Ik dacht dat div's standaard altijd block elementen zijn, maar het gedrag wat jij beschrijft lijkt veel op display:inline. Dan komen items altijd naast elkaar, en hoef je ze dus niet te floaten. Dan kan je echter niet meer zomaar breedtes etc defineren, de reden waarom je meestal voor een display:block icm floats werkt.

http://www.quirksmode.org/css/display.html

[ Voor 16% gewijzigd door Kiphaas7 op 28-02-2009 11:37 ]

zaterdag 28 februari 2009 12:28

Acties:

0 Henk 'm!

drm

f0pc0dert

Volgens w3schools moet er pas worden afgebroken wanneer er niet genoeg ruimte is. Maar ik heb veel meer ruimte dan (3x160+5) 485.

Floatende elementen gaan in het eerstvolgende blokelement floaten. Vergelijk dit met plaatjes (img) die je in een paragraaf(p) float. De "beschikbare ruimte" is de breedte van de div waarin gefloat gaat worden. Die ruimte is maar 160px, omdat de 3e div het element is waarin gefloat gaat worden.

Wat je in zo'n geval het beste kunt doen is de laatste container geen breedte, maar een margin-left geven, ter grootte van de elementen die je er in float. Eventueel kun je, mocht dat nodig zijn, er nog een wrapper omheenzetten waarmee je de breedte van het geheel bepaalt.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

zaterdag 28 februari 2009 13:50

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

drm: dan kom je dus in deze situatie: http://crisp.tweakblogs.n...wser-gets-this-right.html

Intentionally left blank

zondag 1 maart 2009 23:51

Acties:

0 Henk 'm!

drm

f0pc0dert

Ach, da's pas een probleem zodra niet duidelijk is wat "sufficient space means"

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

dinsdag 3 maart 2009 15:58

Acties:

0 Henk 'm!

Standeman

Prutser 1e klasse

Topicstarter

hmmm.. ik zie in dat ik dit niet zomaar werkend ga krijgen. Ik wilde eigenlijk gewoon drie scrollbare tabelletjes naast elkaar.

Damm, daar gaat mijn planning

The ships hung in the sky in much the same way that bricks don’t.

woensdag 4 maart 2009 14:01

Acties:

0 Henk 'm!

tonyisgaaf

Standeman schreef op dinsdag 03 maart 2009 @ 15:58:
hmmm.. ik zie in dat ik dit niet zomaar werkend ga krijgen. Ik wilde eigenlijk gewoon drie scrollbare tabelletjes naast elkaar.

Damm, daar gaat mijn planning

Waar gaat het nou nog mis dan? Zet anders even een testcase online, dat praat wat makkelijker.

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard