Centreret design med element der går helt ud til venstre.

Du kunne eventuelt lave to lag, begge med Position sat til absolute.
Det nederste lag laver du 50% bred og baggrunden grå. Det øverste lag, placerer du i horisontalt i centrum. Du definerer selvfølgelig lagenes placering med z-index. :)

Den løsning var det første jeg prøvede. Problemet er at de ikke kan resizes i højden, når jeg tilføjer tekst til elementerne.

Okay. Det jeg har gjort istedet er at bruge to elementer som baggrunden. Det nederste lag er 100% i højden og 50% i bredden. Laget der er nested deri, er 100% af bredden men har dog ikke fået tildelt en højde. Dette lag vil ligne det nederste lag til forveksling, men kan udvides når der kommer mere indhold i. Grunde til at jeg ikke bare bruger min-width, er at den selector ikke er understøttet af IE6.

Tekstelementet deri har jeg tildelt en negativ margin, som er halvdelen af elementets bredde bare i minus.

Du kan se koden herunder:

CSS:
body
{
    margin: 0px;
}
#bag
{
    position: absolute;
    z-index: 1;
    width: 50%;
    height: 100%;
    background-color: #c9c9c9;
}
#tekstbag
{
    position: absolute;
    z-index: 2;
    width: 100%;
    background-color: #c9c9c9;
}
#tekst
{
    width:850px;
    float: right;
   
    margin-right: -425px;
   
    border: solid 1px black;
}


Html:
<div id="bag">
    <div id="tekstbag">
        <div id="tekst">
            Tekst!<br />
            Tekst!<br />
            Tekst!<br />
            Tekst!<br />
            Tekst!<br />
            Tekst!<br />
        </div>
    </div>
</div>


Håber det var sådan du mente! :P

Desværre heller ikke.

Det er nemt at lave i tabeller, som følgende:

<table style="border-collapse:collapse; width:100%;">
    <tr>
        <td style="background:#666; width:auto;"></td>
        <td style="background:#333; width:850px;">
            <p>
                Tekst<br />
                Tekst<br />
            </p>
        </td>
        <td style="width:auto;"></td>
    </tr>
</table>

Men jeg ønsker ikke tabeller, til at gøre jobbet.

Okay.. Ved at sætte en negativ margin på et element der wrapper det hele, som også har en bredde på 50%, kan man sætte bredden på elementets indre margin. Lidt som jeg gjorde ovenfor.

Den store forskel er at der bliver indsat en negativ margin i højre side på tekstelementet, som er samme bredde som selve elementet.

Det giver i hvert fald den effekt du efterspørger. Hvis du ikke lige forstår det, skal jeg gerne prøve at pensle det lidt mere ud. :)

CSS:
body
{
    margin: 0px;
}
#wrap
{
    width: 50%;
    margin-right: -425px;
    float: left;
    background-color: Blue;
}
#tekstbag
{
    margin-right: 425px;
    background-color: Yellow;
    clear: right;
}
#tekst
{
    width: 850px;
    float: right;
    margin-right: -850px;
    background-color: Red;
}

HTML:
<div id="wrap">
    <div id="tekstbag">
        <div id="tekst">
            Tekst!<br />
            Tekst!<br />
            Tekst!<br />
            Tekst!<br />
            Tekst!<br />
            Tekst!<br />
        </div>
        <div style="clear: right;"></div>
    </div>
</div>

Du kan eventuelt se effekten ved at fjerne baggrundsfarven på #tekst

Hold k... hvor er det cool. Jeg vil lege lidt frem og tilbage med det. Smid et svar, og du skal få en omgang velfortjente points :D

Tak for din tålmodighed.

Velbekomme.. :) Du skal endeligt skrive hvis der er mere jeg kan hjælpe med. Skal godt nok lige noget i aften, men ellers er jeg klar. ;)

Lyder rigtigt godt :D

Der kom lige en ting mere, jeg har lige testet det i IE6.0 og der virker det godt nok ikke. Ikke at jeg forventede det.
Ligeledes er der en lille fejl i IE 7. Problemet i IE7.0 opstår når jeg tilføjer en border.

Jeg har et link til både CSS og og HTML
http://dvl.mind2web.dk/
http://dvl.mind2web.dk/content/design/style.css

Ligeledes hvis du ikke lige ligger inde med IE6.0 kan du eventuelt bruge denne:
http://ipinfo.info/netrenderer/index.php

Hvad er problemet helt præcist? Er det at de kanter der er, burde være iden i elementerne istedet for at sidden udenpå? Hvis det er tilfældet, skal du bare justere dine marginer.

Og tak for points iøvrigt. ;)

Mine kanter skal gå lidt udenfor som det ser ud i IE8, FF, Chrome osv. men ikke i IE7 og i IE6 ser det virkelig underligt ud.

IE6, kan man nemlig slet ikke læse teksten.

Jeg troede faktisk slet ikke at der var så stor forskel på IE7 og IE8

Jeg skal nok lige kigge på det senere. I værste fald kan vi fikse det med noget JS. Men det er absolut sidste udvej. Og jo. IE7 kan man godt blive træt af meget hurtigt, hvis det bliver bare lidt avanceret.. :)

Det blev en laang arbejdsdag igår, så undskyld du først lige hører fra mig idag. :)

Jeg bryder mig ikke om det, men jeg kan ikke helt finde ud af hvorfor IE7 ter sig som den gør. Så jeg har lavet et lille fix. Dog ikke JS. Bare rolig.

Jeg har fundet ud af at fejlen ligger i den margen som #tekstbag har fået tildelt.

Ændre dit stylesheet til (jeg har rettede nogle småting hist og pist):
html, body
{
    margin: 0px;
    background: #333;
}
*
{
    font-family: Verdana, Geneva, sans-serif;
    margin: 0px;
}

/**** INTERFACE ****/
.header
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
}
.keepRight
{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 129px;
    background: white url(images/headerBG.png);
    border-style: solid;
    border-color: #D5EB56;
    border-width: 0px 0px 5px 0px;
}
.header .holder
{
    position: absolute;
    top: 0px;
    left: 50%;
    width: 850px;
    height: 129px;
    margin: 0px 0px 0px -425px;
    background: white url(images/headerBG.png);
    border-style: solid;
    border-color: #D5EB56;
    border-width: 0 0 5px 5px;
}

.banner
{
    position: absolute;
    top: 134px;
    left: 0px;
    right: 0px;
    width: 100%;
}
.banner .holder
{
    position: absolute;
    top: 0px;
    left: 50%;
    width: 850px;
    height: 260px;
    margin: 0px 0px 0px -420px;
    background: blue;
    overflow: hidden;
}
.banner .boxHolder
{
    border-right: solid 5px #D5EB56;
    position: absolute;
    top: 0px;
    left: 50%;
    width: 850px;
    margin: 0px 0px 0px -420px;
    height: 200px;
}
.banner .boxHolder .box
{
    position: absolute;
    top: 60px;
    right: 0px;
    background: #D5EB56;
    width: 240px;
    height: 140px;
}

.details
{
    position: absolute;
    top: 394px;
    width: 100%;
}

#wrap
{
    width: 50%;
    margin-right: -425px;
    float: left;
    background-color: Blue;
    border-style: solid;
    border-color: #D5EB56;
    border-width: 5px 0px 5px 0px;
}
#tekstbag
{
    margin-right: 425px;
}
#tekst
{
    width: 850px;
    float: right;
    margin-right: -860px;
    margin-top: -5px;
    margin-bottom: -5px;
    background-color: white;
    border-style: solid;
    border-color: #D5EB56;
    border-width: 5px 5px 5px 0px;
}

Og indsæt dette i headeren på dit HTML-dokument:
<!--[if lt IE 8]>
<style type="text/css" media="all">
#tekstbag
{
    margin-right: 420px;
}
</style>
<![endif]-->

Og tak for linket iøvrigt, til den side der kunne lave screenshots af ens websites. Det er ret handy hvis man ikke lige sidder på en maskine med alle browsere installeret. :)

Nice det virker, og jeg har foretaget nogle forskellige tests i IE6.0, hvilket har overbevist mig om at der nok skal bruges javascript til at lave en ordenlig løsning der, så i IE6.0 har jeg valgt at bruge et alternativt stylesheet, så det stadig ser pænt ud, men ikke helt magen til dog.

Jeg siger endnu engang tak for hjælpen, har fået åbnet nogle døre. Super fedt :D

Velbekomme... Hvis jeg lige finder ud af hvorfor IE6 brokker sig, skal jeg nok lige skrive her i tråden. ;)