en lang floating div der holder sig indenfor en ydre div?

Prøv at cleare:

<div id="center"style="border:3px solid blue;clear:both;">

Jeg er ikke interesseret i at cleare. Min floating div flyder fordi den skal være til venstre for center div. Det er muligt at jeg ikke har fået forklaret mig godt nok? Jeg prøver (gud bedre det) lige med lidt ascii tegning:

Her er hvad jeg gerne vil opnå
senarie 1 (kort venstre div):
+-[ydre]-------------------------------------+
| +-[float:left]---+ +-[center]------------+ |
| |                | |                    | |
| +----------------+ |                    | |
|                    |                    | |
|                    +---------------------+ |
+--------------------------------------------+

senarie 2 (lang venstre):
+-[ydre]-------------------------------------+
| +-[float:left]---+ +-[center]------------+ |
| |                | |                    | |
| |                | |                    | |
| |                | |                    | |
| |                | +---------------------+ |
| |                |                        |
| |                |                        |
| +----------------+                        |
+--------------------------------------------+

...og det jeg gerne vil undgå er at senarie 2 ser således ud:
+-[ydre]-------------------------------------+
| +-[float:left]---+ +-[center]------------+ |
| |                | |                    | |
| |                | |                    | |
| |                | |                    | |
| |                | +---------------------+ |
+-|                |-------------------------+
  |                |
  +----------------+

Jeg håber at det er klarere nu?
/O-zone

damn ... jeg VIDSTE bare at det ville se galt ud :-S ... prøv at kopiere min tegning ind i en editor med monospace font (som f.eks. Courier New) :-(

I din ydre DIV sætter du
overflow: auto;
så udvider den sig selv når de indre elementer bliver for store.

For at det virker i IE/Win, mener jeg det ydre element skal "have layout", hvilket dog ofte nemt kan opnås ved at sætte width til 100% eller height til 1%. En alternativ metode er at floate den ydre div også.

Jeg har sagt det før, og jeg kommer sikkert til at sige det igen: "Det var lige godt satans!" :-O

Det virker ganske rigtigt som nubi19 og stich siger: ydre div hedder nu:
<div id="outer" style="border: 3px solid black; height:1%; overflow:auto;">
og så virker det i IE, FF og Opera.

Jeg kan ikke floate ydre div, da den skal stå i centrum, så jeg bruger height:1%
Det er jo på sin vis skræmmende, at man skal ty til sådan noget snavs, for at få ens layout til at virke - men hvis det er vilkårene, er det vel vilkårene. :-/

Smider nubi19 og stich hver et svar, så fordobler jeg og giver hver af jer 30 points (det havde jeg #¤£$#%¤$!!! aldrig fundet frem til selv, så det er rigeligt 60 points værd! :) )

Det kan nu godt lade sig gøre at centrere en div, selvom den er floated. Men pyt, det andet virker jo som forventet.

Points: Ellers tak, de er nubi19s.

Og forresten er det ikke noget snavs at anvende overflow-property'en til dette formål, dens opførsel er præcist formuleret i specifikationen. height:1% er dog en anden sag...
For at forstå grunden til at den ønskede opførsel ikke blot er der pr. default, bør du fx læse Eric Meyers "Understanding floats"-artikel.

Bare giv pointene til stich, jeg har dem jeg skal bruge :)

Ingen vil have de beskidte points, snup dem selv så. :-)

Artiklen jeg tænkte på hedder forresten "Containing Floats":
http://www.complexspiral.com/publications/containing-floats/

stich> du kom mig i forkøbet. Jeg skulle lige til at spørge om du havde et link til den artikel :)

stich & nubi19> Så styrer i jer eddermanme tøsser ... jeg VIL af med de points! Hvis I ikke svarer med det samme, fordobler jeg pointene!! >:-7

Nej - spøg til side, men jeg er selv glad for hurtigt at kunne overskue hvilke svar der er gode, når jeg browser i besvarede spørgsmål. Og en måde at gøre det på er at se hvem som har fået points! ;-)

Så derfor (ikke kun for jeres egen skyld, men for the common good!) smid lige et svar begge to!

Hvis I gerne vil have noget meningsfyldt at putte i jeres svar, så kan I jo fortælle mig hvorfor (og især hvornår) en overflow:auto giver udvidede bokse, og hvornår den giver scrollbars? ... det er desværre ikke et helt uvæsentligt spørgsmål, for selvom alt virkede peachy i det simple eksempel jeg har postet her, så resulterede height:1% desværre i grimme små kasser med scrollbars, da jeg implementerede løsningen i min rigtige kode. :-(

Du kan måske bruge overflow:hidden; så, og/eller give boksen layout i IE vha. _zoom:1; i stedet for height:1% (eller width:100%?).

Og for en anden gangs skyld, hvis jeg ikke har markeret mit indlæg som et svar, så er det ikke noget jeg vil have points for! ;-) Jeg er nemlig ikke tilhænger af at vente med at lægge et svar, indtil problemet er løst...

Vedr. point er jeg enig med stich :) Men nu får du din vilje.

_zoom er jo lidt af et hack, så i første omgang vil jeg mene den bør undgåes. Får du problemet i alle browsere eller kun IE ?

Overflow skal stå til auto, der er desværre ikke en option der gør lige det du ønsker, men auto kommer tættest på.

hidden vil skjule al tekst der er større end boksen, så det vil ikke virke.

Problemet skyldes at auto gør følgende: "If the content is clipped, the browser should display a scroll-bar to see the rest of the content"

Og når height er 1% vil den klemme skidtet til 1% højde og så bare vise scrollbars. Jeg mener dog ikke at alle browsere er lige dumme på det område (læs: IE er noget hø)

En mulighed, som heller ikke virker i IE, er min-height = 1px - dette fungerer 100 % i FireFox, men IE understøtter pt. ikke min-height.

Men noget jeg mener at have fået til at fungere i IE, er at sætte den til at køre strict mode ved at indsætte dette i toppen af dit html dokument:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Strict //EN" "http://www.w3.org/TR/html4/strict.dtd">

Hovsa der ramte jeg lige send knappen inden jeg var færdig.
Men prøv Strict mode, hvis du ikke allerede kører det, og se hvordan det arter sig. Og meld så tilbage :)

Jeg går altid ud fra browserne er i strict mode, med mindre andet er angivet.

height:<antal>% vil blive beregnet til height:auto med mindre der er et parent element der har en højde med en beregnet værdi forskellig fra auto. Og derfor vil overflow:hidden altså ikke nødvendigvis skjule noget af indholdet -- men det vil det selvfølgelig i dette tilfælde, da der også kommer scrollbars ved auto, min fejl (det kan dog godt virke efter hensigten indimellem, men sandsynligheden for det er næppe stor, specielt hvis der er en del at scrolle).

min-height:1px burde ikke gøre nogen forskel - og man kan på sin vis sige IE har support for min-height, i form af height. Derfor kan løsningen måske være at nøjes med at servere height:1% til IE < v7 (stadigvæk udelukkende for at containeren skal "have layout"), fx vha. _height:1%. Men hvis problemet stadigvæk er der i Firefox, Opera osv. er det muligt du må over og have fat i at floate den ydre div også. Du kan evt. smide et link til din side, så ville det være lidt nemmere at sige...

stich > Jeg vil også mene man altid bør køre strict, men det er langt fra alle der gør det alligevel :)

vi er enige i at height:1% eller 1px er det samme som height:auto, problemet er bare at den så åbenbart får første ret, og dermed gøres højden så minimal som mulig, og så kommer der scrollbars på overflow:auto delen.

I øvrigt hvad mener du med at den skal "have layout" ? Jeg er ikke stødt på det begreb tidligere - håber det er ok jeg "bryder" ind i din tråd

%&¤#& der ramte jeg Send igen, æv altså.

Der skulle stå håber det er ok jeg "bryder" ind i din tråd O-Zone.

Nu er det efterhånden et stykke tid siden jeg lavede min egen side, men den er opbygget med nestede DIVs også, omend ikke på helt samme måde - hvis du kan få noget ud af at lure lidt på dens html er du mere end velkommen: http://users.cybercity.dk/~dsl198422/programmer.html
Og stylesheetet er her: http://users.cybercity.dk/~dsl198422/style.css

Jeg har pt. lidt dårlig tid, derfor får du lige lov at rode lidt selv med det - evt. kan vi så ikke få din HTML som skaber balladen, så er det nok lidt nemmere at "fixe"

@nubi19:
Så forstår du vel slet ikke ideen i at anvende height:1%... :-s
http://msdn.microsoft.com/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp?frame=true
http://www.satzansatz.de/cssd/onhavinglayout.html

>>>vi er enige i at height:1% eller 1px er det samme som height:auto<<<
Nej, det er vi bestemt ikke enige i. :-) Og resten af den sætning er forresten også forkert.

@stich:
Jeg kan se vi har forskellige grunde til at anvende height: 1%, mit argument for at gøre det er primært at få en højde der automatisk er minimal.

Jeg må indrømme jeg ikke tidligere har hørt om hasLayout fænomenet, så tak for de gode links - altid godt med noget lærerig læsning :)