<div> udvidelse afhængig af indhold

uforståeligt, kan du illustrer med noget grafik? :)

Jeg må sige jeg syntes nu det virker fint som du forklare det. Selvom "content" er mindre end menuen er der stadig ude i højre side en kolonne med Pull ..> Info. Den kolonne fylder mere en "content" og derfor er den blå helt ned til enden af den tekst.

Mener du det blå skal følge teksten sådan bund linjen ikke vil være en vandret streg?
Såden det baggrunden i menuen stopper efter teskten er i menune, og i "content" efter teksten og i den sidte kolonne efter Info?

Arh... Jeg kan se at det virker som det skal i IE (havde ikke tjekket det før), men nu bruger jeg Mozilla 1.6 som min primære browser :) - Hvis I prøver at se siden i Mozilla, giver min problembeskrivelse nok lidt mere mening - hehe

Undskyld forvirringen

sidder og kigger på den nu....
én grund til forskellen kan ligge her:

<?xml version='1.0' encoding='iso-8859-1'?>

Denne skal ganske rigtigt placeres allerførst. Der er bare det ved det at pga en fejl i Internet Explorer går denne browser (IE) i quirks mode når der står noget som helst før doctype erklæringen (altså det der følger efter i din kode). Så dvs. IE viser det i quirks mode, hvor Mozilla viser det i standard mode.

kigger lige lidt mere og vender så tilbage...

du kan altid tjekke om din side vises i quirks eller standard mode ved at indsætte denne kode og så klikke på linket:

<a href="java script:alert((document.compatMode=='CSS1Compat')?'Standard mode':'Quirks mode');">[tjek mode]</a>

jeg ved ikke helt præcist hvorfor din right-bar <div> går ned under din div-main <div> Måske er det pga at den er placeret vha float: left. Jeg har haft samme problem på denne side: http://www.e-tidsskrift.dk/dev/position.php men løste det ved at arbejde med position egenskaberne. Det har måske også noget at gøre med at du ikke angiver højde på noget som helst.

I øvrigt et flot design synes jeg ;-)

float: right - selvfølgelig

Har du umiddelbart nogle forslag til hvordan jeg kan bruge position egenskaberne til at rette op på mit problem?

Før brugte jeg også position, men da jeg nu har brug for en variabel højde i mine bokse, var det smartest at lave et flow, så de bare følger efter hinanden, og dermed er placeret i min "main" boks, og ikke så de bare "svæver" oven på...

jeg kan ikke finde nogen 100%-løsning. Hvis din left-bar altid har samme højde (hvad den vel har fordi menuen er den samme for alle siderne), så er der her en løsning der ser OK i min Mozilla Firebird: http://e-tidsskrift.dk/dev/ichtysdk.html Den ser til gengæld forkert ud i IE, så hvis du vil arbejde videre med den, skal du evt. lave to forskellige css der loades alt efter om folk bruger IE eller en Gecko browser (Netscape og Mozilla). Der er dog også det problem at hvis folk vælger at se skrifen i en større størrelse så bliver designet rykket fra hinanden. Alternativt vil et godt gammelt tabeldesign løse alle dine problemer ;-)
//mik

det er denne del af stylesheetet du skal arbejde videre med hvis du vil bruge forslaget:

#right-bar {
    position: relative;
    left: 600px;
    margin-top: -20%;
        width:200px;
    background-color: green;
}

hvor mange procent negativ topmargin du skal have afhænger af højden af din left-bar <div>, for right-bar <div>'en placeres i forhold til den. Men som sagt, hvis left-bar <div>'en altid har samme højde, kan du godt angive en præcis negativ topmargin for right-bar <div>'en

men igen, hvis left-bar har en fast højde kan du også bare bruge faste mål, f.eks.:

#left-bar {
    position: relative;
    top: 0px;
    left: 0px;
        width:150px;
    height: 160px;
    background-color: #ffcc00;
}
#right-bar {
    position: relative;
    left: 600px;
    margin-top: -160px;
        width:200px;
    background-color: green;
}

sådan virker det i Mozilla og Netscape. I IE skal du i stedet for margin-top: -160px have top: -160px; Eneste problem tilbage er så at IE lader din div-main fortsætte nedad til right-bar's oprindelige position 160px længere nede.

har ændret testen til: http://e-tidsskrift.dk/dev/ichtysdk.php
I php kan man nemlig lægge en browsersniffer ind i starten af dokumentet, f.eks.:

<?php
$browser = $HTTP_USER_AGENT;
$IE = (eregi('MSIE',$browser))?true:false;
$Gecko = (eregi('Gecko',$browser))?true:false;
?>

og så kan du styre dine styles f.eks. sådan:

#right-bar {
    position: relative;
    left: 600px;
<?php if($IE){ ?>
    top: -160px;
<?php }elseif($Gecko){ ?>
    margin-top: -160px;
<?php } ?>
        width:200px;
    background-color: green;
}

Du har så dækning for IE, Netscape, Mozilla, Safari - 99.9% af brugerne ca.

Wow... sikke en masse arbejde du har lagt i det :) - Det er totalt fedt...

Men jeg bliver nok nødt til at smide den lille stump style ind i selve index.php, da det jo ikke rigtig vil virke hvis den bliver smidt i .css'en :)

Kigger lige på det...

Hvis du vil have point, så må du lige lave et "svar" :)

jeg synes det er et problem det er værd at arbejde med. desværre er det ikke optimalt endnu. nu er det indholdet af din div-content der går ned under dinv-main når der er mere indholdet i den går længere ned end i right-bar. det ville jeg godt få løst, men har ikke tid lige nu... måske i aften eller i morgen. eller er der andre der har forlag....?

selve ideen med at have en container-div der skal kunne udvide sig nedad med en indholds-div inden i, er jo noget helt grundlæggende. normalt ville man bare lave det i nogle tabeller, og det ville virke. men nu er opgaven at lave det med css uden tabeller, så lad os se om det ikke kan lade sig gøre.

Hmm... Nu har jeg leget lidt med det, og nu bestemmes baggrundens højde af "right-bar", og det dur jo ikke når "content" er større... :( - men ellers så det da lovende ud...

Hehe... Jeg burde nok opdatere inden jeg skriver noget :) - Tror jeg har haft mozilla til at stå i baggrunden 1 time, uden at opdatere - men det ville godtnok være lækkert hvis det kunne komme til at virke - vil helst undgå tabeller...

jeps, det kan jeg godt forstå. lad os se om vi ikke kan finde ud af en løsning.

ok, det kan ikke lade sig gøre så det virker i begge browsere.

Den enkleste løsning er den der nu ligger på: http://www.e-tidsskrift.dk/dev/ichtysdk.html

Her har jeg benyttet mig af egenskaben display: table-cell; men denne værdi for display understøttes ikke af IE, kun af Gecko browserne. Du kan se de forskellige muligheder for display egenskaben på: http://www.blooberry.com/indexdot/css/properties/classify/display.htm

Der er også en der hedder inline-block, men den er ikke understøttet i nogle af dem.

En tabeldelle opfører sig nemlig som et inline element på den måde at tabelceller kan placeres ved siden af hinanden, men den opfører sig samtidig som et blokelement på den måde at den lave en boks der kan indeholode tekst med andre blok elementer (<p> f.eks.) eller linjeskift.

De andre muligheder dur ikke:

display: inline;
bliver inden for den omliggende <div>, men kan hverken have linjeskift eller afsnit.

float
sprænger den omgivende <div>, fordi floatede elementer netop placerer sig uden for de omgivende blok elementer der bliver flyttet

position: relative;
virker, men kræver at elementet kan placeres i toppen hvilket igen kræver at vi kender højden af den højeste <div>, og det gør vi ikke, fordi den jo netop ikke skal være bestemt i forvejen med kun af indholdet;

position: absolute;
virker ikke. hvis den er højere end den omgivende boks kommer det resterende uden for denne i stedet for at udvide den netop fordi den er absolut placeret, dvs. uden for det almindelige flow. i øvrigt samme problem med at placere den i toppen som med en relativ <div>


Alt i alt: hvis man alligevel skal benytte display: table-cell og denne egenskab alligevel ikke understøttes af IE, ja så man da ekstremt stivsindet hvis ikke man bare uden videre konstruerer siden som en tabel. Det er jo præcis en tabels egenskaber vi vil efterligne med display: table-cell.

Og mon ikke det er svaret? Eller er der andre der vil byde ind?

hov, det gik vist lidt hurtigt. vi taler om tabelCELLER, ikke tabelDELLER ;-)

det er noget vrøvt at der er de samme problemer med position: absolute med at sætte toppen som med position: relative, for med absolut position sættes toppen jo bare i forhold til elementet umiddelbart over, her altså bare som højden af den øverste top div med billedet. med position: relative, derimod har vi problemet med at <div>'en er et blokelement, som altså placerer sig under den foregående <div> og som derfor må "trækkes" op på plads med en negativ værdi for top eller margin-top (hvor vi altså er nødt til at kende højden på <div>'en til venstre for den for at vide hvor meget den skal trækkes opad)

halo, her er et andet design med position: absolute til den ydre div og to sæt float left og right inden i hinanden. det dur sørme i både IE og Mozilla. Se: http://www.e-tidsskrift.dk/dev/float_tabel.html og tag koden derfra. Du skal bare styre baggrundsfarverne så det passer. Men hoved ideen, at indholdet af boksene bestemmer udvider den omgivne div bliver overholdt.

Det må jeg hellere lige tjekke ud :)

jeg har samlet det hele i ét dokument: http://www.e-tidsskrift.dk/dev/non_table_design.html

//mik

Det er bare kanont! Nu virker det :) - Jeg er virkelig glad for din store hjælp...

helt ok, jeg lærte en masse selv...