✔ Div Container Verwirrungen

Status
Nicht offen für weitere Antworten.
L

legoman

Grünschnabel
Hallo zusammen!

Ich habe da eine Frage an Euch CSS Cracks. Die Positionierung von div Container war für mich schon immer ein rotes Tuch und jetzt muß ich einfach mal nachfragen ob einer eine saubere Lösung weiß.

<siehe Anhang>
Also, das Problem ist, die Fenster verhalten sich nicht wie das Bild links, sondern wie das Bild rechts. Ich möchte gerne, daß wenn das grüne Viereck wächst, das orange Viereck weiter nach unter rutscht, und nicht unter dem grünen bzw. blauem kollabiert.

Ich habe links ein Menu (es kann sich in der Länge ändern und länger als der Content rechts sein, oder auch kürzer), der orange Kasten muß aber an der untersten Kante des blauem bzw. grünem Viereck stehenbleiben (je nachdem wer länger ist natürlich).

Inzwischen verstehe ich nichts mehr und hoffe einer von Euch kann mir eine simple CSS Datei zusammen bauen. Geht es auch ohne "min-height"?

Vielen Dank im Vorraus,

legoman

(Ach wie schön einfach es mit Tabelle ging! :-))
 

Anhänge

  • question.jpg
    question.jpg
    9,9 KB · Aufrufe: 31
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
    <title>Test: Div mit Abstand oben</title>
    <style type="text/css" media="screen">
        body,html {
            margin:0;
            padding:0;
        }
        #container {
            background:#f00;
            padding:10px;
        }
        #navi {
            float:left;
            width:300px;
            margin:0;
            background:#0f0;
        }
        #content {
            margin:0 0 0 310px;
            padding:5px;
            background:#00f;
        }
        .clear {
            height:1px;
            clear:both;
        }
        #foot {
            margin:2px 0 0 0;
            background:#f90;
            padding:5px;
        }
    </style>
</head>
<body>
<div id="container">
<div id="navi">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
</div>
<div id="content">
    <p>Sed risus nunc, fringilla a, sagittis at, blandit eget, tellus. Ut consequat pellentesque sem. Quisque non lectus. In hac habitasse platea dictumst. Pellentesque et elit. Morbi vulputate orci non nisi. Pellentesque eu neque. Etiam quam nisi, aliquet nec, posuere sit amet, feugiat id, eros. Vivamus tempor erat at mauris pretium aliquet. Nunc lacus. In hac habitasse platea dictumst. Aliquam sollicitudin risus vitae enim. Nulla leo. Integer arcu. Nulla quis elit eu arcu consectetuer porttitor. Vestibulum ac arcu in nibh ultricies pretium. Donec facilisis lobortis justo. Morbi dignissim aliquam augue. Proin at augue.</p>
    <p>Nam nibh massa, porta non, porttitor quis, lacinia ac, diam. Integer et ligula. Duis bibendum. Pellentesque pede. Fusce tortor. Vestibulum sed nunc non orci feugiat euismod. Ut porta, mauris in dictum consectetuer, risus magna faucibus turpis, quis pretium dui diam sed urna. Nulla adipiscing urna in libero. Donec feugiat tincidunt tortor. Vivamus nibh tortor, facilisis at, rhoncus eu, consectetuer in, velit. Nam elementum odio et ante.</p>
</div>
<div class="clear"></div>
</div>
<div id="foot">Footer</div>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück