Jag har tre boxar som jag vill placera ut inom en container. Containern är centrerad så jag använder relativ positionering.

Box 1 ska ligga längst upp till vänster.
Box 2 ska ligga rakt under 1, med relativ placering efterson Box 1 har relativ höjd beroende på innehåll.
Box 3 ska ligga till höger om Box 1, längst upp och vänsterjusterad.

Vet inte hur jag ska lösa det. Med float kan jag få Box 1 och två på rätt plats, och Box tre att komma rätt horisontellt, men då får jag den inte upp i toppen av containern, utan den utgår från Box 2.

Går det att lösa utan att använda absolut positionering.

Ordningen i HTML koden spelar roll här...
Kan kanske också ställas in med z-index i CSS, men jag har inte provat.

Principen är i alla fall att först ska Box 1 komma, sedan Box 3 och dessa ska ha float satt till left.
Sedan kommer Box 2 utan någon float, det borde placera Box 1 och 3 bredvid varandra och Box 2 borde hamna under.

<div style="position: absolute;">
<div style="position: relative; float: left;">Box 1</div>
<div style="position: relative; float: left;">Box 3</div>
<br style="clear: both;" />
<div style="position: relative;">Box 2</div>
</div>

Misstänkte det men det ger mig problem. Box 1 och 2 läses in i en include-fil, men box 3 finns redan i dokumentet.

Så jag kan inte lägga in box 3 mellan 1 och 2, före eller efter blir inga problem. Går det att lösa ändå? Kan man lägga box 1 och 2 i en anna box, eller på något sådant sätt gå runt det?

Jodå, det är en lösning om du inte vill att Box 2 ska flyttas neråt om Box 3 blir högre i storlek.

<div style="position: absolute;">
<div style="position: relative; float: left;">
<div>Box 1</div>
<div>Box 2</div>
</div>
<div style="position: relative; float: left;">Box 3</div>
<br style="clear: both;" />
</div>