mboost-dp1

CSS float og height problem


Gå til bund
Gravatar #1 - gi-jones
22. sep. 2005 11:54
Jeg arbejder hårdt på, at lære css-layouts frem for de ækle tables jeg er vant til. Jeg synes dog konstant at jeg render hovedet imod den samme mur. Muren består i at få et element til at indeholde et andet, så at sige. Altså lad os sige, at jeg har en <div> tag, der skal indeholde et andet. Hvordan får man så højden og bredden af det yderste element til at være afhængigt af det andet. Problemet opstår når de inderste elementer er sat til "float". Så vil det yderste element ikke resize efter dem. Problemet kan ses her:
http://www.trapezjolle.dk/new/
Gravatar #2 - bjerh
22. sep. 2005 16:31
Hm.. er ikke helt sikker på hvad du mener.
Men hvis du fjerner height: og width: og istedet sætter overflow: auto; ind.

Løser det dit problem?? Er som sagt ikke helt sikker på hvad du mener. :)
Gravatar #3 - NFX
22. sep. 2005 17:01
Hvis du ikke sætter en height på den yderste, vil den så vidt jeg ved bare resize.
I Opera/Firefox/Safari/osv betyder "height" at et element skal have præcist den højde, mens "min-height" betyder at et element skal have minimum den højde, og altså godt kan blive større.

I IE opfører "height" sig som "min-height" i andre browsere, og "min-height" findes slet ikke.
Gravatar #4 - Simm
22. sep. 2005 17:55
#1: Hvis du vil have f.eks højden på inderste element til at matche det yderste skal du bruge inherit.

<div id="noget1" style="height: 500px;">
<div id="indeninoget1" style="height: inherit;">
jalla jalla
</div>
</div>
Gravatar #5 - gi-jones
22. sep. 2005 19:06
Nej, problemet er, at når jeg bruger floating elementer så resizer den store <div> ikke efter de "flydende" divs inden i. Hvis du ser på siden i Firefox, kan du se at de fortsætter ud af bunden af den store box. Af uvisse årsager virker det i IE.

#4: Et interessant trick, men så vidt jeg kan se ikke understøttet alle steder. Jeg kan ikke få det til at køre i IE og der står ikke noget om det hos w3c
Gravatar #6 - bjerh
22. sep. 2005 19:31
still.. overflow styrer om den div som har indholdet, skal forholde sig til indholdet. Altså om den skal brede sig ud. :)

Edit: Nej det er da noget pjat jeg siger. :P
Gravatar #7 - Acro
22. sep. 2005 19:41
#1 gi-jones:
Prøv at indsætte følgende nederst (i dit container-div):
<div style="clear:both;"></div>
Gravatar #8 - Simm
22. sep. 2005 21:25
#5: Der er lidt om det her: http://dbaron.org/css/test/inherit
Gå til top

Opret dig som bruger i dag

Det er gratis, og du binder dig ikke til noget.

Når du er oprettet som bruger, får du adgang til en lang række af sidens andre muligheder, såsom at udforme siden efter eget ønske og deltage i diskussionerne.

Opret Bruger Login