min-height ignoreras

[Diver Girl]

Hej

Har ett css-problem som jag brottas med.

 

Jag vill ha divar som blir högre ju längre texten blir.

 

Jag har divar som ser ut så här:

 

<div id="main-wrapper">
<div id = "leftContent-wrapper">
	<div id = "leftContent">
		<p>text, text, text</p>
	</div>
</div>

<div id="content-wrapper">
	<div id="content">	

 		<h3>Rubrik</h3><br /><br />
		<h1>Underrubrik</h1>

		<div>En otrolig massa text........</div>
</div> <!--slut content div-->	
</div> 
<!--slut content-wrapper div-->
</div> 
<!--slut main-wrapper div-->

 

När innehållet i content-div växer vill jag att main-wrapper ökar på höjden. Jag visar css-koden för de här tre divarna (main-wrapper, content-wrapper, content):

 

#main-wrapper {
background-color:#202020;
padding-bottom: 25px;	
border:solid 2px #dadada;
width:760px;
height:auto !important;
min-height:600px;
height: 600px;
background:url(1rand.png) repeat;
}

#content-wrapper{
width:500px;
float:right;
background: #202020;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-right:10px;
}

#content{
width:480px;
padding:11px;
}

 

Min min-height ignoreras helt i FF och texten "åker förbi" main-wrappern.

Och nej - det blir inte snyggt!

 

Snälla - nån som kan hjälpa mig!

Tack på förhand!

 

 

 

 

 

 

 

[Anjuna Moon]

Det är float:right i #content-wrapper som ställer till det.

Om du ändrar till:

#content-wrapper{
width:500px;
background: #202020;
color:white;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-right:10px;
text-align:left;
}

samt omsluter din content-wrapper-div med <div align="right"></div>

så bör det fungera, även om det är en fullösning (och dessa krävs ju ibland pga dålig implementation av css)

 

 

[Diver Girl]

Efter din strålande insats tidigare så följer jag ditt tips med största glädje ;-)

 

Det här fungerade delvis.

Ja, min main-wrapper följer med texten fint och höjden justeras == glad!

 

align:right gör att texten inte alls lägger sig som jag vill.

Den lägger sig förvisso bredvid left-content, men inte längst till höger som jag vill ha det. När left-content upphör, så fortsätter content under, alltså till vänster i main-wrapper.

 

Jösses, va svårt att förklara... ;-)

 

 

 

 

 

[zerblat]

Nja, svjks ignoreras inte min-height i Firefox. Eller blir main-wrapper:s höjd mindre än 600px hos dig?

 

Det som händer är att, eftersom content-wrapper är flytande, så tar inte main-wrapper hänsyn till dess höjd. main-wrapper får alltså höjden 0, om det inte vore för min-height. CSS kan vara lite ointuitivt ibland...

 

Det enklaste (och snyggaste) sättet att lösa det på är att sätta overflow: auto på main-wrapper. Se även http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

 

 

 

[Anjuna Moon]

Jösses, va svårt att förklara... ;-)

Nä, jag förstår vad du menar. Se om zerblats tips kan hjälpa först, jag tror även på det.

 

[Diver Girl]

Hej och tack för snabbt svar!

 

Hm, fungerar ganska hyfsat nu... ;-)

 

Förmodar att det som felar nu är enkelt (för nån som kan, jösses vad jag har mycket kvar att lära...) att rätta till.

 

OK, så här:

Nr1: tar bort align:right från div. Förmodar att den inte krävs längre.

 

Test1:

Tog bort de tre raderna om height från main-wrapper och la till overflow-raden. Float:right är också tillbaka på sin plats.

Och visst, det fungerade precis hur fint som helst. Nackdel: då får man inte en default-höjd vilket jag gärna vill ha för enhetlighetens skull. Det är bara (vad jag vet nu) en av sidorna som kommer att bli så lång.

 

Test2:

La dit de tre raderna om height igen, samtidigt som jag behöll overflow-raden.

Fungerar perfekt i FF, men IE krånglar givetvis. Där lägger sig content-wrapper under left-content fast fortfarande åt höger. Höjden 600px behålls och det kommer upp en scroll istället. Funkar visserligen, men ser inte snyggt ut givetvis... ;-). Nej, så vill vi inte ha det...

 

Vad göra? Har jag missuppfattat något?

Något annat jag kan testa?

 

 

 

[zerblat]

Tyvärr är stödet för CSS i IE6 rätt trasigt, så ofta finns det inga andra alternativ än att använda diverse hack ( http://tantek.com/log/2005/11.html ) för att få det att funka både i webbläsare som följer standarderna och i IE.

 

Den jag oftast använder är att dölja CSS-regler för IE med barnselektorer ( http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer )

 

En annan variant är att lägga sånt som bara IE ska se inuti villkorskommentarer ( http://www.quirksmode.org/css/condcom.html )

 

I ditt fall vill du väl dölja overflow: auto från IE, så du skulle kunna göra typ

body > #main-content {
overflow: auto;
}

 

[Anjuna Moon]

En annan variant är att lägga sånt som bara IE ska se inuti villkorskommentarer

Alternativt, när det gäller stilar som bara IE skall se, inleda stilnamnen med underscore:

.GulFärgIFirefoxBlåIInternetExplorer {
color:yellow;
_color:blue;
}

 

[inlägget ändrat 2007-01-19 13:39:44 av Anjuna Moon]

[Diver Girl]

OK

 

Jag måste iväg ett par timmar, men ska läsa länkarna och testa era tips lite senare!

 

Tack så länge!

 

Jag återkommer... ;-)

 

 

 

[Diver Girl]

Nu har jag läst och testat och läst igen... och testat... ;-)

 

Alternativt, när det gäller stilar som bara IE skall se, inleda stilnamnen med underscore:

 

Ett jättebra tips, som jag faktiskt inte visste förut, bra att veta. Tack!

 

Det känns som det är child selectors som passar bäst i det här fallet.

Men - givetvis får jag inte det att fungera.

Om jag förstår det rätt så ska man skriva det man inte vill ska ske i IE. Det är lätt att tolka det som att man ska skriva nya regler istället, som t ex i detta fallet overflow:hidden (ja, det fungerade givetvis inte det heller)....

 

Så här ser det ut hos mig nu:

#main-wrapper {
background-color:#202020;
padding-bottom: 25px;	
border:solid 2px #dadada;
width:760px;
height:auto !important;
min-height:600px;
height: 600px;
overflow:auto;
background:url(1rand.png) repeat;
}


body > #main-wrapper {
overflow:auto;
}

 

Ser fin-fint ut i FF, men problemet kvarstår i IE. Content lägger sig under left-content fast till höger och scrollbar kommer fram. Höjden på main-wrapper står kvar på 600px.

 

Har jag förstått instruktionerna rätt?

Har jag skrivit rätt?

Just nu känner jag mig mest trög och väldigt outbildad i css... ;-)

 

Jag är så tacksam för all hjälp jag får av er, lär mig så mycket samtidigt som är bra att veta!

 

[zerblat]

Tanken är ju att du ska gömma overflow-regeln för IE, men det hjälper ju inte om du har samma rad på ett ställe där IE kollar. Jag skulle ändra till:

#main-wrapper {
background-color:#202020;
padding-bottom: 25px;
border:solid 2px #dadada;
width:760px;
height: 600px;
background:url(1rand.png) repeat;
}

body > #main-wrapper {
overflow:auto;
height:auto;
min-height:600px;
}

Det är lite samma sak med min-height och height. IE förstår inte min-height, men tolkar height som om det vore min-height och height var satt till auto (eller ingenting).

 

[Diver Girl]

Javisst!!! Tjong i ballongen!

Tack, tack, tack!

 

Jag sa ju det: jag förstår inte dessa css... ;-)

 

Tanken är ju att du ska gömma overflow-regeln för IE, men det hjälper ju inte om du har samma rad på ett ställe där IE kollar.

 

Nej det är ju klart man inte kan ha det så. Fördelen är att man kan tolka det på rätt sätt när man får tips... ;-)

Ja, det spelar ingen roll i nuläget hur jag tolkade det, huvudsaken är att jag ser och förstår det nu.

Det här är ju ett otroligt bra sätt att komma runt IE kontra FF problemen, och jag känner mig genast vidareutbildad i css... ;-)

 

Nu äntligen kan jag verkligen gå vidare i mitt projekt och fixa det sista innan publicering!

 

Tack än en gång - till er båda två!

Härligt engagemang och många bra råd och tips!

 

/Glad Diver Girl