2 Boxen in einer Zeile

[mbecker]

hey,

ich hab en kleines Problem mit CSS .

Ich möchte gerne 2 Boxen in einer Zeile haben, bisher verweigert mir das aber CSS und die 2. Box fängt in einer neuen Zeile an.

Wie kann ich das Problem lösen ?

Explizit dazu der HTML-Code:

<div id="navcontainervert">
 <ul id="navlistvert">
  <div id="border">
    <li id="active"><a href="#" id="current">News</a></li>
    <li><a href="#">Newsarchiv</a></li>
    <li><a href="#">Specials</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Forum</a></li>
   </div>
 </ul>
</div>

Wende ich jetzt ein neues DIV an, so erscheint dieses unter der hier gezeigten Box. Dieses Problem würde ich gerne ändern, indem die 2. Box in der selben Zeile erscheint.

Der CSS-Code (ich denke aber, dass er nicht hilfreich für dieses Problem ist):

 #navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}

#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

#navlist a:link, #navlist a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
	
	font-size: 12px;
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-size: small;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}

#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}

#navlist a:hover { color: #f00; background-color: #FFFFFF; }

body.section-1 #navlist li#nav-1 a,
body.section-2 #navlist li#nav-2 a,
body.section-3 #navlist li#nav-3 a,
body.section-4 #navlist li#nav-4 a
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}

#navlist #subnav-1,
#navlist #subnav-2,
#navlist #subnav-3,
#navlist #subnav-4
{
display: none;
width: 90%;
}

body.section-1 #navlist ul#subnav-1,
body.section-2 #navlist ul#subnav-2,
body.section-3 #navlist ul#subnav-3,
body.section-4 #navlist ul#subnav-4
{
display: inline;
left: 10px;
position: absolute;
top: 95px;
}

body.section-1 #navlist ul#subnav-1 a,
body.section-2 #navlist ul#subnav-2 a,
body.section-3 #navlist ul#subnav-3 a,
body.section-4 #navlist ul#subnav-4 a
{
background: #fff;
border: none;
border-left: 1px solid #ccc;
color: #999;
font-size: smaller;
font-weight: bold;
line-height: 10px;
margin-right: 4px;
padding: 2px 10px 2px;
text-decoration: none;
}

#navlist ul a:hover { color: #f00}

#contents
{
background: #fff;
border: 1px solid #ccc;
border-top: none;
clear: both;
margin: 0px;
padding: 15px;
}
/* Ende horizentales Menü */

Vielen Dank schon mal im Voraus für eure Tipps und HIlfen

mbecker

 

[Maik]

Stellt sich die Frage, welche DIV-Box du neben dem horizontalen Listenmenü anordnen willst