Einfügen eines neuen div

Hallo,
ich bin relativer Neuling auf dem Gebiet "css".

Ich habe folgende Konstellation:

oben ist ein #header, darunter am linken Rand eine #navi, rechts daneben ein #content und in dem #content ein#wrapper. Das funktioniert auch alles. Nun gestalte ich gerade ein wenig um (ich bin in der Übungsphase!) und möchte unter die #navi noch eine #navi_unten (oder wie immer man das nenen will) machen, wo ich z.B. eine Textzeile "Letzte Aktualisierung" oder ein "icra"-zeichen unterbringen kann. Unter dem #content ist noch ein #footer.
Hier ein Auszug aus dem Code:

#header
{
border: 1px solid #008484;
background-image:url(images/fotostreifen1.jpg);
background-repeat: repeat;
height: 70px;
margin: 10px 10px 10px 10px;
}

#navi
{
height: 310px;
width: 180px;
margin-left: 10px;
border: 1px solid #008484;
background-image: url(images/navibild_02_01_08.jpg);
background-repeat: no-repeat;
float: left;
display: inline;
}

#navi_unten
{
height: 310px;
margin-left: 10px;
width: 180px:
border: 1px solid #008484;
float: left;
dispay: inline;
}

#content
{
background-color: #008484;
margin-left: 200px;
margin-right: 10px;
border: 1px solid #005b5b;
text-align: justify;
}

#wrapper
{
margin: 10px auto;
padding-top:15px;
width: 715px;
}

#footer
{
font-size: 9pt;
text-align: center;
margin-left: 200px;
margin-right: 10px;
height: 20px;
clear: both;
}

Ich kann die #navi_unten aber anschließend nicht ansprechen, wenn ich da was eintragen will. Wo ist der Fehler??

elena

Nicht ganz, jetzt sehe ich sie zwar, aber sie hängt neben der#navi und nicht drunter!

elena

Du hast für die beiden divs gleich zwei Angaben definiert, die für ein Nebeneinander sorgen:

float: left;
display: inline;

Wenn du diese rausnimmst, sollten sie untereinander positioniert werden. Wenn du #content rechts von #navi und #navi_unten positonieren möchtest, musst du die beiden in ein gemeinsames div stecken, welches dann die Eigenschaft float:left erhält

Ja, du legst ein übergeordnetes div an, z.B.:

<div id="navi_gesamt">
<div id="navi"> 
<ul> 
<li> <a href="index.html">Home</a></li>
<!-- usw..... -->
</ul>
</div> 

<div id="navi_unten"></div>
</div>

<div id="content">

Der CSS-Teil sieht dann folgendermaßen aus:

#navi_gesamt {
float:left;
}

#navi
{
height: 310px;
width: 180px; 
margin-left: 10px;
border: 1px solid #008484;
background-image: url(images/navibild_02_01_08.jpg);
background-repeat: no-repeat;

/* die float und display Angaben entfernt */

}

#navi_unten
{
height: 310px;
margin-left: 10px;
width: 180px;
border: 1px solid #008484;
}