[XHTML/CSS] Przenoszenie bloku i tło

[jok]

Od niedawna zacząłem uczyć się xhtml-a, testuje swoje umiejętności w przykładowej stronie. Napotkałem na pierwsze preszkody. Chciałem stworzyć stronę z logiem kolumną lewą miejscem na treśc oraz stopką - standard. Dodatkowo chciałbym porobić tła w poziomie do loga kolumny z treścią i stopki lecz nie wiem jak zrobić to żeby były one rozciągnięte na całości a nie wpływały na takie elementy jak przykładowo logo. Może jest jakiś atrybut który przenosi np blok pod spód ? Oto mój kod, proszę o pomoc.

html:

Kod: Zaznacz cały

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
 <meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-2" />
 <title>Nazwa strony</title>
 <meta name="description" content="opis w wyszukiwarce" />
 <meta name="keywords" content="slowa kluczowe" />
 <meta name="revisit-after" content="7 days" />
 <meta name="robots" content="all" />
 <link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" />
 <link rel="Shortcut Icon" type="image/ico" href="ico.ico" />
</head>
<body>


<div id="tla">

<div id="tlo1">tlo1</div>
<div id="tlo2">tlo2</div>
<div id="tlo3">tlo3</div>

</div>



<div id="calosc">
  <div id="logo">1</div>
  <div id="kolumna">2</div>
  <div id="tresc">3</div>
  <div id="stopka">4</div>

</div>

</body>
</html>

css:

Kod: Zaznacz cały

body {
	margin: 0px;
	background-color: black;
}

#tla {
	float: left;
	width: 50px;
	height: 140px;
	background-color: red;
}

#tlo1 {
	float: left;
	width: 50px;
	height: 140px;
	background-color: red;
}

#tlo2 {
	float: right;
	width: 50px;
	height: 400px;
	background-color: red;
}

#tlo3 {
	float: right;
	width: 50px;
	height: 40px;
	background-color: red;
}

#calosc {
	width: 760px;
	border: 0px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
}

#logo {
	width: 100%;
	height: 140px;
	background-color: rgb(213, 219, 225);
}

#tresc {
	height: 400px;
	background-color: gray;
}

#kolumna {
	float: left;
	width: 220px;
	height: 400px;
	margin: 0;
	background-color: rgb(235, 235, 235);
}

#stopka {
	clear: both;
	height: 40px;
	background-color: rgb(213, 219, 225);
}