[la-finest]

HeyHo,

Mein Problem ist, ich möchte 2 <div> Elemente nebeneinander postionieren. Aber das läuft nicht. Hab dann mal rumgegoogelt und die gefunden Lösungen versucht auf meins zu übertragen Fehlanzeige.

meine css:

/*####Navigation###*/
#nav{
        width: 210px;
        /*position: relative;*/
        font-family: Verdana, Helvetica, Arial, sans-serif;
        background-color: #90bade;
        color: #333;
}
    
#nav ul{
        list-style: none;
        padding: 0;
        border: none;
}
        
#nav li{
        border-bottom: 1px solid #90bade;
        margin: 0px;
}
    
#nav li.unselected a{
        display: block;
        padding: 4px 5px 4px 5px;
        border-left: 10px solid #1958b7;
        border-right: 10px solid #508fc4;
        background-color: #2175bc;
        color: #fff;
        text-decoration: none;
        width: 100%;
}

html>body #nav li.unselected a{
        width: auto;
}

#nav li.selected a{
        display: block;
        padding: 4px 5px 4px 5px;
        border-left: 10px solid #0948a7;
        border-right: 10px solid #407fb4;
        background-color: #1958b7;
        color: #fff;
        text-decoration: none;
        width: 100%;
}

html>body #nav li.selected a{
        width: auto;
}
        
        
        
#nav li a:hover{
        border-left: 10px solid #1c64d1;
        border-right: 10px solid #5ba3e0;
        background-color: #2586d7;
        color: #fff;
}


/*###End Navigation###*/

#contentBox{
    width: 1004px;
    min-height: 576px;
    border: 1px solid black;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

#content{
    border: 1px solid black;
    width: 500px;
    position: relative;
    border: 1px dotted blue;

}

mein html

<div id="contentBox">
        <div id="content">Content</div>
              <div id="nav">
                <ul>
                    <li class="selected"><a href="#">Home</a></li>
                    <li class="unselected"><a href="#">#</a></li>
                    <li class="unselected"><a href="#">#</a></li>
                    <li class="unselected"><a href="#">#</a></li>
                    <li class="unselected"><a href="#">#</a></li>
                    <li class="unselected"><a href="#">#</a></li>
                </ul>
            </div>
        </div> 

Wenn ich bei #content float:left; hinzufüge, dann setzt er mir nur das erste <li>-Element der Liste neben das div.

Greetz,
la-finest

[MrNiceGuy]

Ähm, wo ist denn das 2. DIV, welches sich neben deine Nav-Box setzen soll? O_o

[la-finest]

der content soll rechts von der nav box sein.

[Jann Hendrik]

Meinst du links von dem div in dem es selbst drin steckt, oder meinst in innerhalb des div auf der linken Seite?

[siyabonga]

Ich denke "float:left" bzw "float:right" ist hier Dein Freund - je nachdem bei welchen der beiden Divs Du es einfügst...

[la-finest]

wenn ich die navi mit float right positioniert wird, dann sitzt sie ca. 10px nach unten verschoben am äußeren rechten rand. das content div sitz am linken äußeren rand und kleb am div welches über ihm liegt fest.

[la-finest]

wenn ich bei #content als height:200px; einfüge, dann wird meine navi nach unten verschoben. aber sie sollte doch normalerweise davon unbeinflusst bleiben!

[MrNiceGuy]

EDIT: Ach, mein Fehler, die komische Einrückung suggerierte mir, dass der nav-Container innerhalb des Content-Containers liegt. Musste erst genauer hinschauen, dass dem nicht so ist...

Ich schaue mal, wie es klappen könnte, vielleicht habe ich noch ne psasende Lösung irgendwo zwischen meinen tausend Scripten...

EDIT 2: wenn du in der Definition von #nav ein "float: right;" einbaust und den Container ÜBER den Content-Container packst, funktioniert ist. Ist mir auch erst beim Testen eingefallen, dass der Nav-Container ja nur von Elemenen umflossen wird, die NACH ihm im HTML-Text auftauchen, das bezieht sich ja nicht auf Elemente DARÜBER - zumindest soweit ich weiß. Es funktioniert wie oben beschrieben dann jedenfalls bei mir.

[Jann Hendrik]

Zitat von MrNiceGuy

dass dem nicht so ist...

das ist mir auch nicht aufgefallen.

Wäre es aber ggf., wenn auf meine obige Frage geantwortet worden wäre.

[FloB]

Ich habs mir jetzt nicht angeschaut, aber schon ans Box-Modell gedacht? Die Gesamtbreiten der Boxen (inkl. margin, padding, border) dürfen nicht größer sein als die umschließende Box. Sonst bringt float auch nichts mehr.

Tipp (damits auch IE weniger Probleme hat Die enstprechenden Elemente sollten in Container verpackt werden, die die richtige Breite haben (margin/padding/border:0) und alles weitere wird für die Kindelemente eingestellt.