Container Text mittig

[I-Tiger]

Moinsen Leute,
ich habe ein Problem... Ich habe 3 Bereiche (div's) erstellt, alle nebeneinander ist auch alles schön und läuft auch, die Infobox habe ich rechts absolut positioniert, nach langem probieren hat es mit dem floaten nicht so ganz klappen wollen

. Auf jedenfall der mittlere Bereich (main) sollte als Überschrift mittig und der Text sollte linksbündig erscheinen. Nun kommt aber der ganze Text mittig und wenn ich zwei Zeilensprünge mache ist mein Text am Ende des mittleren Bereiches.
Ich weiß nicht weiter helft mir!!
HTML:

<div style="height: 306px;" id="navi">
<ul>
<b><u><h2><li>Navigation</b></u> <br>  </li>
<li><a href="index.html" id="navigation">&rArr;Startseite<br></a> </li>
<li><a href="http://tobi-photoproduction.blogspot.de/" id="navigation" target="blank">&rArr;Blog <br></a></li>
<li>&rArr;Galerie <br>  </li>
<li>&rArr;Über mich <br></li>
<li>&rArr;Ausrüstung  <br></li>
<li>&rArr;Archiv  <br> </li>
<li>&rArr;Gästebuch   <br></li>
<li>&rArr;Kontakt</h2></li>
</ul>

   <div id="main">
<p align="left">Halo</p>

<div id="info">
<p align="center"><b><u>INFOBOX</u></b></p>
<hr><p align="center">30.06.2014</p>Diese Seite ist momentan komplett in Bearbeitung, es kann noch eine Weile dauern, bis hier alles eingerichtet ist!
<a href="https://www.facebook.com/pages/Tobi-Photoproduction/514059638712231?fref=ts">Hier ist meine Facebook-Seite!</a><hr>
</div>
</div>
</div>

CSS:

html {background:url(../Bilder/texture.png);
}
#navi ul {
         font-size:110%;
         float: left;
         margin-left:5px;
         height:370px;
         width:500px;
         padding-left: 10px;



                 }

#navi li{ align:left;
          list-style:none;
          padding-left: 10px;


}

#main {
background:#D7F41D;
border-width:2px;
border-color: black;
margin-right: 225px;
margin-left: 200px;
}

body {
background-image:url(../Bilder/background.jpg);
border-radius: 30px 30px 30px 30px;

width: 1024px;
margin: 0px auto;
}
#info {
background:#FCF7F7;
float: right;
margin-top: 1px;
position:absolute;
top:100px;
left:1250px;
width: 200px;
height: 400px;
margin-left: auto;
margin-right: 1em;
color:#15070B;
padding-left: 5px;
padding-right: 5px;
}
#navigation{
text-decoration:none;
color: white;
}
#navigation:hover{
color:silver;
font-style:italic;
letter-spacing:5px;
}

 

[threadi]

Zuerst solltest Du deinen HTML-Code sauberer schrieben. Ich sehe mindestens 4 HTML-Fehler, die auch für Fehldarstellungen verantwortlich sein könnten.

Deine Frage lässt sich aber mit einem float: left; beim #main lösen.

 

[I-Tiger]

1. Welche Fehler sind es?
2. Danke ersteinmal, aber jetzt ist der Hauptbereich unten links....links ist ja schön und gut, aber er sollte von oben bis zur info box gehen.

 

[thecain]

<b><u><h2><li>Navigation</b></u> <br> </li>

ist falsch