[CSS] Menübox innerhalb einer anderen Box

[robert]

Hallo,

ich befasse mich gerade mit CSS und habe hier ein Problem, welches ich bisher nicht nachvollziehen kann.

.content_box -> Große Box in der der Text und Menü dargestellt werden soll

.info_pane -> Darstellung des Textes

.content_menu -> Darstellung des Menüs

Der IE 7 zeigt es so an wie ich will, die große Box, darin der Text und rechts vom Text die Menübox.

Kommen mehrere Einträge in die Menübox wird die content_box entsprechend vergrößert.

Im FF und im Safari wächst die Menübox einfach über die contentbox hinaus.

Hier mal die Quellen, aufs wesentliche reduziert um das Problem zu verdeutlichen.

html:

<div class="content_box">
    <div class="info_pane">
        <div class="content_menu">
                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul> 
        </div>
           Blindtext<br><br>
         Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext <br>
         Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext <br>
         Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext <br>
         Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext <br>
         Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext <br>
         Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext <br>
    </div>
</div>

css:

div.content_box{
  background-color: #102236;
  min-width:600px;
  width:70%;
}

div.info_pane{
    
    color: #ffffff;
    font-family:Arial;
    text-align:left;  
}


div.content_menu{
    text-align:right;
    float:right;
}

div.content_menu a {

    display:block;
    width:120px;
    
    padding: 2px 2px 2px 10px;
    border: 1px solid #102236;
    background: #B3BDC7;
    text-decoration: none; 

}

edit:

Ein overflow:auto; in .content_box lässt es auch im FF richtig anzeigen.
Ist jetzt die Frage, ob das eine gute Lösung ist?

 

[QuArK007]

also overflow: auto; ist eine gängige Anpassung der Box.

Ob die Lösung gut ist (mir nicht bewusst wie das anders zu machen sein soll mit Divs) kann ich dir aber nicht sagen. Wenn der IE keine Probleme schiebt, dann ist es sicherlich die beste Lösung.