Uite un exemplu de baza.
CSS-ul ar fi cam asa:
Cod:
body {
text-align: center;
}
#page {
width: 770px;
margin: 0 auto;
text-align: left;
background: #666;
}
#header, #footer {
background: #aaa;
padding: 15px;
clear: both;
}
#mid {
width: 770px;
background: #666;
overflow: hidden;
}
#sidebar {
width: 250px; /*250+10+10=270*/
padding: 10px;
background: #eee;
float: right;
}
#content {
width: 480px; /*480+10+10=500*/
padding: 10px;
background: #ccc;
float: right;
}
Html-ul cam asa:
Cod:
<div id="page">
<div id="header">header</div>
<div id="mid">
<div id="content">
<h1>Lorem ipsum</h1>
<p>What is Lorem Ipsum?Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>What is Lorem Ipsum?Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div id="sidebar">
<ul>
<li>Element menu</li>
<li>Element menu</li>
<li>Element menu</li>
<li>Element menu</li>
<li>Element menu</li>
</ul>
</div>
</div>
<div id="footer">footer</div>
</div>
Dupa cum vezi in html, "sidebar" apare dupa "content" in cod, iar in pagina va fi afisat primul. Toata treaba asta e data de float: right; pe ambele elemente (vezi css). Daca te joci cu floaturile, si pui float: left; la ambele, o sa vezi ca isi schimba ordinea la afisare
Vezi attach pt exemplul concret (redenumeste fisierul in floats.html)
Daca ai intrebari, shoot!
Succes!