WN - En annan snabb css fråga

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - En annan snabb css fråga (https://www.wn.se/forum/showthread.php?t=11948)

Jag har två DIV´ar:

Citat:

#vanster {
width: 180px; height: auto; position: relative; left: 40px; top: 0px;
}

#hoger {
width: 500px; height: auto; position: relative; left: 230px; top: 0px;
}

De ligger i en Annan DIV som de altså är "relative" till om jag förstått det rätt. Problemet är att "#hoger"-DIV´en Lägger sig nedanför "#vanster".

Sajten är centrerad. Hur löser man det? Varför lägger de sig inte bredvid varandra?

Såhär ser det ut i body:

Citat:

<div id="bakg2">
<div id="vanster">

EN TABELL

</div>

<div id="hoger">
vcfggfdgf
</div>

</div>

Om jag gör så här....

<body>
<div id="vanster">
<table width="150" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

</div>
<div id="hoger">hdfbvskhb</div>
</body>

Och css så här....

#vanster {
width: 180px; height: auto; float: left; margin-right: 20px; padding: 8px;
}

#hoger {
width: 500px; height: auto; float: right;
}

Då fungerar det....

Det funkade efter lite exprimenterande. Tack!

Tillbaks till orginalproblemet:

Anledningen till att det inte fungerar är att relativ/absolute fungerar omvänt till vad man ofta tror.

Vad du behöver göra (även om designen också går att lösa med tabell eller float:) är att sätta css för bakg2 till:

Kod:

#bakg2 { position: relative; }

Därigenom blir top: och left: värdena i taggar inuti "boxen" relativa till sin "förändra(parent)-box" (dvs. divven bakg2). Annars blir elementen relativa till sin naturliga egna position, vilket oftast inte är vad man vill.

Se också till att sätta position: absolute; för #vanster och #hoger så att de kommer på en exakt(=absolut) position i förhållande till den div/"box" som de befinner sig i.

Kod:

#vanster { width: 180px; height: auto; position: absolute; left: 40px; top: 0px; }

#hoger { width: 500px; height: auto; position: absolute; left: 230px; top: 0px;}

Lite klurigt men om man förstår hur detta hänger ihop så beter sig absolute/relative helt logiskt.