css problem float:left er ikke nok , giver store mellemrumme

Du kan smide float:right på de bokse til højre.

klovnefisken, hvis du i din kode nummererer div'erne vil du opdage, at du for eksempel får div nummer 3 til højre og div nummer 4 til venstre.  Jeg lavede dette udsnit af koden med numre:

    <div id="vis_udskrift" style="width:684px;height:860px;margin-top:2px;margin-left:2px;border:5px solid #b2b2b2;float:left;overflow:auto;">
      <div style="width:300px;height:60px;float:left;margin:5px;padding:5px;border:1px solid black">nummer1</div>
      <div style="width:300px;height:35px;float:left;margin:5px;padding:5px;border:1px solid black">nummer2</div>
      <div style="width:300px;height:30px;float:left;margin:5px;padding:5px;border:1px solid black">nummer3</div>
      <div style="width:300px;height:25px;float:left;margin:5px;padding:5px;border:1px solid black">nummer4</div>
    </div>

For at vise div'erne parvis og så de flugter foroven uanset den enkelte div's højde, så skal du clear dine floats efter hver anden div.  Prøv således:

    <div id="vis_udskrift" style="width:684px;height:860px;margin-top:2px;margin-left:2px;border:5px solid #b2b2b2;float:left;overflow:auto;">
        <div style="width:300px;height:60px;float:left;margin:5px;padding:5px;border:1px solid black;clear:non;">nummer1</div>
        <div style="width:300px;height:35px;float:left;margin:5px;padding:5px;border:1px solid black;clear:non;">nummer2</div>
        <div style="clear:both"></div>
        <div style="width:300px;height:30px;float:left;margin:5px;padding:5px;border:1px solid black;clear:non;">nummer3</div>
        <div style="width:300px;height:25px;float:left;margin:5px;padding:5px;border:1px solid black;clear:non;">nummer4</div>
        <div style="clear:both"></div>
    </div>

Hvis du genererer siden dynamisk hvor du får height værdierne fra et databaseudtræk, så kunne du for eksempel indsætte en tæller i din while løkke således at tællerens værdi er et lige tal indsættes <div style="clear:both"></div>

<ole>

To ting undrer mig:

1) Hvorfor flå elementer ud af det naturlige sideflow med float, når det ikke er nødvendigt? Det skaber meget ofte problemer at omgå det naturlige sideflow, hvad enten det sker med float eller position:absolute.

2) Hvad betyder clear:non - eller rettere: Hvorfor er det ikke rettet?

I stedet for float er det som oftest langt mere hensigstmæssigt at anvende display:inline-block, som får elementet til at opføre sig som et inline element 'udadtil' og et block element 'indadtil'. Ovenikøbet har man fuld kontrol over, om to sidestillede elementer skal vertikalflugte i toppen, i bunden eller i midten:


/mvh
</bole>

tak ole det hjalp lidt på det , jeg har lige ændret lidt i koden, som den ser ud nu ville jeg gerne have at nummer 3 smuttede op mellem 2 og 4 i højre side , for at få den pæneste udskrift , hvis det på nogen måde kan lade sig gøre via css

ellers må jeg igang med at opbygge 2 arrays mens jeg læser det ud af databasen og regne på hvor den skal være og så lave 2 div mere , en venstre og en højre , og så ud fra de 2 arrays fylde højre og venstre div , men håber det kan gøres via css

M.V.H Bruno

Er det sådan noget, du mener?

Jep Ole
lige netop således , at alle 'flyder' op der hvor der er plads

Jeg tror, jeg ville lave to DIV med inline-block. Det ene ville så blive #1 i tegningen - og et 'usynligt' også med inline-block, der rummer tre DIV #2, #3 og #4.

Jeg ved ikke, hvordan dit DB-træk ser ud, men det må være forhldsvis let at hælde formaterede data i nogle arrays og så implodere dem til sidst.

hej igen, undskyld den lidt lange svar tid, var lige kaldt ud af landet i 36 timer.

ja jeg kan nu læse at det er ikke mulig at lave med rent css,
mit DB udtræk giver dem alle meget blandet, kort fortalt, de bliver udlæst i den rækkefølge , den er er klikket mest på kommer først, så det kan variere fra time til time , hvilken rækkefølge de kommer i , men i udtrækkeet er der også højden på de 'kasser' med fra databasen

jeg kan nu læse at jeg skal til at lave lidt mere arbejde , men løsnings model vil nok blive , at udlæse dem fra DB og så lave 2 array med listen af dem, og en variabel der holder styr på den brugte højde , så den næste bliver puttet i det array der er lavest, for til sidst udskrive dem i 2 divs en i venstre side (#1) og en med højre side (#2, #3, #4) så kan det styres

en anden metode kunne jo også være at at lave position:relative;
så styre dem med top og left, det burde jeg have data nok med til , og så bruge 2 variabler højre og venstre
derefter se hvilken er mindst
putte kassen til den side
lægge den højde til den variabel

men jeg har faktisk fåt svar på mit spørgsmål, og det er at det kan ikke dade sig gøre at de 'flyder' op der hvor der er hul ved brug af css stylen, man skal ind og programmere sig ud af det
så hvem af jeg der skal have point for det
ja det ved i nok bedst selv

M.V.H. Bruno

Brug aldrig left og top i forbindelse med relative - og brug (næsten) aldrig absolute uden et omkransende relative positioneret element. Ellers sætter du på sigt vand over til potentielt store problemer.

Det undrer mig, du mener at kunne trække højden af 'kassern' ud af databasen. Det har jeg overordentlig svært ved at forestille mig  =)

Hvad point angår, så samler jeg ikke. Ellers tak  =)