Also dein Code-Aufbau ist ja ein einziges Desaster.
Du solltest dir einfach merken:
Doctype
<html>
<head>
alle Head-angaben:
Title
Meta-Tags
Stylesheet-Angaben
Links
usw.
</head>
<body>
alle Elemente,
die später auch
auf der Seite
zu sehen sind
</body>
</html>
Alles anzeigen
So wie du es hast ist alles bunt durcheinander gewürfelt. Und ich empfehle zudem noch alle CSS-Definitionen auszulagern, damit du eine Eigenschaft auch nur ein mal verändern musst, um den Effekt in allen Dateien, die darauf zugreifen, zu erlangen.
Darüberhinaus ist es blödsinn, dass deine CSS-Datei mit <html> anfängt.
Die Struktur einer CSS-Datei ist viel einfacher als die einer HTML-Datei.
Es gibts weder eine Einleitung, noch etwas spezifisches am Ende. Die Datei fängt einfach mit body{......} an und hört auch mit einem solchen Element wieder auf. Am besten du schaust dir mal die CSS-Datei von irgendeiner X-beliebigen Seite an.
Um deine Elemente dann wie gewünscht anzuordnen, solltest du am besten mit position: absolute arbeiten. Ein beispielhafter CSS-Eintrag wäre dafür:
#navi{
position: absolute;
top: 350px;
left: 50px;
width: 200px;
height: 400px;
border: 1px solid #000;
}
Nun würde deinem Navi-Div eine absolute Position zugeordnet. Das heißt, es ist nicht abhängig von irgendwelchen anderen Elementen (außer dem Element, in dem es sich möglicherweise befindet*) und die Position, an der es sich dann befindet wird durch die Zeilen 2 und 3 bestimmt. Dein Div hat dann einen Abstand nach oben von 350 Pixeln und einen zum linken Rand von 50 Pixeln. Natürlich kannst du so auch einen Abstand zum Boden (bottom) oder rechten Rand (right) definieren.
Wenn du nun noch die breite des Elements beachtest, kannst du ganz prima ein weiteres Element genau daneben anorden, nämlich indem du definierst:
andereselement{
position: absolute;
top: 350px;
left: 250px;
width: 700px;
height: 900px;
Nun hat das 2. Element einen Abstand zum linken Rand von 250px und liegt so genau neben der Navileisten. Wenn du dann noch oben in der Mitte ein Element anbringen willst, kannst du top: 10px wählen, damit es nicht am Rand klebt und left: 50% oder auch einen Pixel-Wert, der das Element relativ zu seiner Breite in der Mitte der Seite erscheinen lässt (bisher ist die Seite 250px + 700px = 950px breit).
Ich hoffe das bringt dich erstmal ein Stückchen voran :).
Wenn noch etwas unklar ist oder du noch sonstige Fragen hast, scheue dich nicht die Fragen zu stellen 
* Beispiel dafür wäre eine Verschachtelung von Divs.
Wenn du beispielsweise ein Inhalts-Div hast, darin aber noch ein linkes und ein rechtes Div postieren willst, sind die CSS-Angaben des linken Divs im Inhalts-Div dann relativ zu dem übergeordneten Div.
Klingt sicher kompliziert, lässt sich aber am besten erschließen, wenn du es selbst ausprobierst. Also eine Div-Kombination, wie:
<div id="inhalt">
<div id="link"></div>
<div id="rechts"></div>
</div>
mit verschieden Positions-Werten vershen.
Noch zu deinem PPS:
Das kann entweder daran liegen, dass dein Windows keinen Unterschied zwischen bild.jpg und bild.JPG macht, der Server, auf dem deine HTML-Datei abgespeichert ist aber schon (sprich: die Datei heißt bild.JPG, du hast aber in der HTML-Datei die Quelle bild.jpg angegeben). Oder du hast den Datei-Pfad auf deiner Festplatte angegeben also beispielsweise:
<img src="C:/Dokumente und Einstellungen/.../Bilder/bild.jpg " alt="Bild" />
es sollte aber lauten <img src="bilder/bild.jpg">, da du nur den Bidl-Datei-Pfad relativ zu der Datei angeben musst, die auf das Bild zugreift. Eine HTML-Datei, die also im Ordner HTML liegt, welcher den Unterordner Bilder hat, in dem das Bild bild.jpg liegt, braucht als Pfadangabe zu dem Bild also nicht src="C:/....usw" sondern nur src="bilder/bild.jpg"
Grüßchen! 