Avatar billede o-zone Nybegynder
14. april 2006 - 00:01 Der er 17 kommentarer og
2 løsninger

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

Hej med jer...

Jeg har en floating div der kan blive ret lang. Den ligger i en ydre div, og når den bliver længere end den ydre div, så banker den bare ud over bunden på den ydre div (i IE, FF & Opera).

Hvad gør jeg for at den ydre div automatisk bliver forøget i højden, når min float div bliver lang. Altså således at min float div altid er indeholdt af den ydre div uanset hvor lang den bliver.

Her er lidt simpel eksempel-kode:
---
<body>
<div id="outer" style="border: 3px solid black;">
    Denne div skal gerne få skubbet højden, så venstre div med den røde border holder sig indenfor her<br>
    <div id="left" style="float:left; border:3px solid red">
        left<br>left<br>left<br>Denne div må ikke ryge ud over center div, selvom indholdet i den bliver længere<br>
    </div>
    <div id="center"style="border:3px solid blue">
        center<br>center<br>
    </div>
</div>
</body>
---
Avatar billede roenving Novice
14. april 2006 - 00:04 #1
Prøv at cleare:

<div id="center"style="border:3px solid blue;clear:both;">
Avatar billede o-zone Nybegynder
14. april 2006 - 00:22 #2
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
Avatar billede o-zone Nybegynder
14. april 2006 - 00:25 #3
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) :-(
Avatar billede nubi19 Nybegynder
14. april 2006 - 10:02 #4
I din ydre DIV sætter du
overflow: auto;
så udvider den sig selv når de indre elementer bliver for store.
Avatar billede stich Nybegynder
14. april 2006 - 16:04 #5
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å.
Avatar billede o-zone Nybegynder
14. april 2006 - 22:19 #6
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! :) )
Avatar billede stich Nybegynder
15. april 2006 - 03:27 #7
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.
Avatar billede stich Nybegynder
15. april 2006 - 03:32 #8
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.
Avatar billede nubi19 Nybegynder
15. april 2006 - 15:31 #9
Bare giv pointene til stich, jeg har dem jeg skal bruge :)
Avatar billede stich Nybegynder
15. april 2006 - 16:25 #10
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/
Avatar billede o-zone Nybegynder
15. april 2006 - 17:43 #11
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. :-(
Avatar billede stich Nybegynder
15. april 2006 - 19:24 #12
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...
Avatar billede nubi19 Nybegynder
19. april 2006 - 10:39 #13
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">
Avatar billede nubi19 Nybegynder
19. april 2006 - 10:41 #14
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 :)
Avatar billede stich Nybegynder
19. april 2006 - 11:40 #15
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...
Avatar billede nubi19 Nybegynder
21. april 2006 - 08:06 #16
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
Avatar billede nubi19 Nybegynder
21. april 2006 - 08:13 #17
%&¤#& 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"
Avatar billede stich Nybegynder
21. april 2006 - 08:51 #18
@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.
Avatar billede nubi19 Nybegynder
26. april 2006 - 14:45 #19
@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 :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester