Positionering av 2 divar i en div

Du har hittat ett (av flera) problem med CSS..

Du kan floata EN av divvarna. #content kommer då att sträcka sig i förhållande till den andra, icke-floatade divven.

Problemet är när innehållet i den icke-floatade divven är kortare än i den floatade så kommer ju "container att bli kortare än den floatade som alltså kommer att sticka ut utanför #container.

Detta dilemma kan lösas med t.ex. javascript. Men det kräver ju att användaren har javascriptstödet påslaget. Man kan troligen också fibbla med andra mer eller mindre osäkra hack, men jag har inte fördjupat mig i sånt.

Istället, när jag ställs inför samma problem, så anänder jag helt enkelt en tabell med två celler. Gjort på 1 minut, validerar enligt W3C, stöds av alla webbläsare och kräver inga extra javascripter eller konstiga hack. Men då krävs förstås att man inser att W3C rekommendationer inte är annat än just rekommendationer och inte lag.

Eller så använder jag ett javascript som gjorts av http://projectseven.com som funkar med Dreamweaver (kanske med andra program också?).

EDIT: Här är länken till Project Seven's sida: http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

jag provade att lägga en float på enbart den kortaste diven (#right) iom att #left kommer ha en konstant höjd då det är en lista med länkar som inte kommer förändras direkt mycket. Men lägger jag float: right; på #right så visst, den lägger sig till höger, men samtidigt hamnar den "under" #left.

Jag avstår från att använda tabeller så långt det bara är möjligt då jag inte vill göra en layout i tabeller, men här kanske jag inte har något annat val x(

Men tack för ditt väldigt snabba svar! :)

Kan du inte bara sätta en width på dina #left och #right? 49% vardera borde väl fungera utmärkt? 50 % har jag för mig buggar i vissa läsare.

annaica skrev:

jag provade att lägga en float på enbart den kortaste diven (#right) iom att #left kommer ha en konstant höjd då det är en lista med länkar som inte kommer förändras direkt mycket. Men lägger jag float: right; på #right så visst, den lägger sig till höger, men samtidigt hamnar den "under" #left.

Jag avstår från att använda tabeller så långt det bara är möjligt då jag inte vill göra en layout i tabeller, men här kanske jag inte har något annat val x(

Men tack för ditt väldigt snabba svar! :)

Kolla länken jag la till längst ner i mitt första svar...

För att du ska se bakgrundsfärgen i content så får du antingen floata den left, eller om designen blir fel då sätta höjd på den. Det beror på hur omgivningen runt din content ser ut vilket som blir bäst att göra och om innehållet kommer skifta mycket så det inte går att sätta en höjd. De två inneliggande divvarna kan du också ha left på men de måste veta hur bred content är.

silfver skrev:

Kan du inte bara sätta en width på dina #left och #right? 49% vardera borde väl fungera utmärkt? 50 % har jag för mig buggar i vissa läsare.

Provade det, men oavsett vilken bredd jag angav så la sig ändå #right under.

Danne V skrev:

Kolla länken jag la till längst ner i mitt första svar...

Kollat... men jag får det verkligen inte att fungera med divar så det får bli en tabell med 2 kolumner. Det är den lösningen som jag nu har hittat som funkar.

Men du måste ha gjort något fel någonstans. Ska fungera... Allt som behövs är

#content{
background-color: #00f;
width: 30em;
float: left;
border: 1px solid #000;
}
#left{ 
width: 20%;
 float: left;
}
#right{
width: 80%;
float: left;}

Jag hittade lösningen genom ett annat forum. Det man behöver göra är att lägga till

<div style="clear:both;"></div>

efter dessa divar, så funkar det fint!