float boxar

http://wizzler.lokalen.nu/projects/trojan/

hur kan jag få #calendar att flyttas ner under #login ?

clear: right;

... efter kan du lägga #content innan #login i HTML-koden för att få upp den så att det ser bra ut :)

okey. fungerade med clear: right; men om jag lägger till två content rutor så följer content ner med #calendar. några ideer ?

/bump ; http://wizzler.lokalen.nu/projects/trojan/ <- kolla hur det ser ut just nu så förstår ni.

1. Lägg #content före #login i HTML-koden
2. Ha inte två id med samma namn i samma dokument

Vill du ha en tvåkolumnslayout så måste du i det här fallet lägga innehållet i varje kolumn i en varsin <DIV> som du sen gör flytande åt det ena hållet.

Det blir alltså två extra <DIV> element. Å andra sidan behöver du inte lägga innehållet i den vänstra kolumnen i ytterligare en <DIV>, om du inte är ute efter nån särskild effekt. Kör med <P> för textstycken.
Ditt formulär i den högra kolumnen behöver heller inte läggas i en <DIV> som du har gjort. Sätt bara en float direkt på form{} istället.

formuläret är i en div eftersom det är strukturen.

du säger att jag måste göra en ny div med float åt höger samt en ny åt vänster? Det låter inte logiskt. Ska man inte kulla lägga en float åt det hållet på #cpanel, #calendar och #content. ? Skulle du kunna skriva ett konkret exempel så jag kan se hur det ska se ut ?

WiZzLeR skrev:

formuläret är i en div eftersom det är strukturen.

Jo, precis. Med <DIV> kan man skapa en struktur som man sedan kan applicera sin CSS-mall på. Men bara vid behov!
Det finns ingen anledning att stoppa in koden i en massa <DIV> bara för att det representerar olika sektioner på sidan, när man kan stajla sidan som man vill utan dom. Just formuläret hade du kunnat stajla med form {float:right;}, med samma resultat, som ett exempel.

WiZzLeR skrev:

Ska man inte kulla lägga en float åt det hållet på #cpanel, #calendar och #content. ?

Istället för att försöka förklara hur float funkar så länkar jag: :)
http://www.autisticcuckoo.net/arkiv.php?id=2004/12/10/flytande

WiZzLeR skrev:

Skulle du kunna skriva ett konkret exempel så jag kan se hur det ska se ut ?

<div id="vansterkolumn">
	<h2>Innehåll</h2>
	<p>Lite text</p>
</div>
<div id="hogerkolumn">
	<h3>Övrigt</h3>
	<p>Annat</p>
</div>
<div id="sidfot">
	<p></p>
</div>

-------------------

#vansterkolumn {
	float:left;
	width:550px;
}
#hogerkolumn {
	float:left;
	width:200px;
}
#sidfot {
	clear:left;
}