Autostretcha DIV

Hej,

Jag har två stycken divar som ligger bredvid varandra (enligt bifogad fil). Den vänstra DIVen innehåller information som kan vara av varierande längd. Informationen till höger är statisk, den ändrar inte på sig längdmässigt sett. Mellan dessa två DIVar har jag en avskiljare i form av ett sträck. Detta sträck slutar där CONTENT-diven slutar (den vänstra). Jag tycker inte det ser så snyggt ut så jag skulle vilja att den sträcks ut ner till botten.

Hur löser jag detta?!

Så här HTML-strukturen ut för sidan:

<div id="content">

	<div id="content_inline_left" style="height: auto;">
	INNEHÅLL
	</div>

	<div id="content_inline_right">
        INNEHÅLL
	</div>
	
	<br style="clear:both;" /> 

</div>
<div id="belowthebottom">&nbsp;</div>
</div>

CSS-kod:

#content {
	clear:both;
	min-height: 100%;
	margin: 0;
	padding: 25px 0 70px 0;
	}

#content_inline_left {
	float: left;
	padding-left: 20px;
	padding-right: 35px;
	margin: 0px 0 35px 0;
	border-right: 1px solid #B8B8B8;
	width: 460px;
	color: #000;/*#7C7C7C;*/
	}

#content_inline_right {
   	float: right;
   	width: 170px;
   	margin: 0px 5px 0 25px;
   	padding: 0px 17px 5px 0px;
	color: #000;/*#7C7C7C;*/
	}

Läs på om Faux columns. Har tyvärr ingen länk men det fungerar i princip så att du gör en bild med t.ex 10px höjd och, i ditt fall, med samma längd som dina två divar tillsammans sen räknar du ut vart 460px (längden på din vänstra div) är på den bilden och gör en avskiljare där. Efter du gjort det så skär du av bilden där avskiljaren är så du har avskiljaren längst till vänster och sen 170 tomma pixlar till höger om den (längden på din högra div).

Background: #din färg url(dinbild.gif) 460px 0 repeat-y; på #content.

Om detta var svårt att förstå så läs som sagt på om Faux Columns.
lycka till!

Edit: Du behöver inte beskära bilden när du har fasta mått. så du kan bara göra bilden 460px+170px och sätta avskiljaren vid 460px (eller vart du nu vill ha den).

Edit2: Finns en möjlighet att jag misförstått hela frågan, men jag hoppas inte det. ^^

Nej, du har uppfattat den rätt...grundprincipen är alltså att jag har en bakgrundsbild där jag redan innan har gjort markering för strecket som annars återfinns som en border i CSS och som jag stretchar i y-led...

Japp precis, Kan påpeka oxå att texten i footern på Flygfyren.nu antingen flyter upp på, eller gå ner under (beroende på vilket det är tänkt att det ska vara) den gråa bordern i FF.

Angående koden för faux columns så ska det alltså inte vara 460 0 repeat-y om du inte klippt till den utan då ska det vara 0 0 repeat-y.

Cibbe skrev:

Kan påpeka oxå att texten i footern på Flygfyren.nu antingen flyter upp på, eller gå ner under (beroende på vilket det är tänkt att det ska vara) den gråa bordern i FF.

Det är några som påpekat det tidigare för mig här. Har rättat till det med <br style="clear: both;" /> eftersom jag fick det tipset. I mitt FF ser det väldigt bra ut men tydligen inte i andras? Hur kommer det sig?

I mitt FF ser det väldigt bra ut men tydligen inte i andras?

När jag tittar i firefox får du en radbrytning enligt nedanstående:
Allt material på Flygfyren.nu är skyddat
enligt lagen om upphovsrätt. © 2005
Försök med:
#footer {

clear: both; 

width: 740px; height: 28px; 

background: url(/picture/footer.jpg) no-repeat; 

padding: 0px; margin: 0;

    }

#footer p {font-size: 10px; color: #000; padding: 5px 0 5px 0; margin: 0 0 0 ?px; text-align: center;}

eller mixtra lite med måtten

Detta sträck slutar där CONTENT-diven slutar (den vänstra). Jag tycker inte det ser så snyggt ut så jag skulle vilja att den sträcks ut ner till botten.

Radera belowthebottom-diven, den behöver du inte på den här sidan, och sätt marginal på left kolumnen om du tycker det blir för tätt, då ska strecket följa med ända ner till foten om jag inte ser fel.
Men du måste ändra denna i footer margin-top: -28px; till ett +värde

Glömde säga, att i och med att din content har clear och ingen float så har du inte den med dig ner även om du har höjd på den... så ditt streck påverkas inte av den. (bara med tanke på att du hade med den däruppe...)

Har ni lust att verifiera om det ser bättre ut nu. Jag har nu ändrat på koden och tog dessutom bort "belowthebottom-diven" och det fungerar ju bra, eller det ser bra ut hos mig iaf. Bäst att ni kikar i er webbläsare! :)

Jo, nu ser det bra ut men istället har det tillkommit ett nytt problem ^^
Flyfgyren >> startsida där nere (som återfinns under menyn där uppe) flyter över texten i foten. Det är bara på startsidan den finns så jag antar att den inte ens ska vara där.

Cibbe skrev:

Flyfgyren >> startsida där nere (som återfinns under menyn där uppe) flyter över texten i foten. Det är bara på startsidan den finns så jag antar att den inte ens ska vara där.

Igår testade jag att placera navigations-diven längst ner också. I FF såg det bra ut men i IE blev det knasigt som vanligt.

Bifogar skärmdump från FF på indexsidan. Det ser likadant ut i Opera. Konstigt att det inte syns i Firefox hos dig :q

Ja, det är synnerligen konstigt! Jag har ver 1.5 av FF.

Varför är jag den ända som inte ser felet på skärmen?! :q

Testat tömma cachen? =)

Jag får också det där.. hehe har ff v1.0

hmm, ytterst konstigt. Nu när du tagit bort Flyfgyren >> startsida där nere så har du fått tillbaka problemet med texten i foten. Den vill helt enkelt inte lyda ^^

ehmm.. det hela med grejen där beror nog på webläsarna, i FF 1.0 visas den som webbebba's bifogade del, men i FF 1.5 visas den snyggt o fint längst ned! :)

Som jag brukar säga - "Gör om gör rätt! Hur svårt kan det vara?" haha :) Är det jag som programmerar kod som det inte är tänkt att man ska göra eller vem är det som har gjort fel?!

Mycket märkligt även jag har nämligen version 1,5 av FF. När jag editerar din CSS med FF:s webdeveloper och tar bort

margin-top: -28px;

i din footer fungerar det utmärkt vet däremot inte hur det blir i de andra webbläsarna då.

webbebba skrev:

margin-top: -28px;

Anledning till att jag har margin-top: -28px; på footern är för att jag har en div ovanför på resten av sidorna som heter "belowthebottom" och den är helt "tom". Den används för att göra det möjligt för footern att alltid bli placerad längst ner på sidan om den har lite innehåll samt tvärtom om det är mycket innehåll. Om jag direkt i index.php går in i footern och lägger till style="margin: 0;" så borde den ju nollställa -28px som finns i CSS-filen?

Testar att ändra på det så får vi se vad som händer! :)

Jag valde att hårdkoda in footern i index.php. Vi får se om det ger ett bättre resultat?!