Hallo zusammen,

ich hoffe mir kann hier jemand helfen, stehe vor folgenden Problem:

Ich habe ein einfaches Layout über Divs erstellt. Sobald der Inhaltsbereich (#main) jedoch größer ~ 70% oder eben das browserfenster verkleinert wird, rutscht dieser bereich unter das ganze Konstrukt.

Wie kann ich das unterbinden? Habe schon versucht mit min-width zu arbeiten, ging aber auch nicht....

Hier mal das HTML:

HTML-Code:

<div id="banner"></div>

<div id="content_left">
        
    <h2 class="menu_headline">Navigation</h2>
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
</div>
	
<div id="main">test</div>

Die CSS Datei hierfür:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

body     {         margin:0;     padding:0;     background:url(images/bgbody.gif);     background-repeat:repeat-x;     }   #banner     {     background:url(images/top.gif);     background-repeat:no-repeat;     height:68px;     }         #content_left     {     background:url(images/left.gif);     background-repeat:no-repeat;     width:170px;     height:480px;     padding-top:120px;     padding-left:25px;     float:left;     border-right:1px dotted;     }     #main     {     background-color:#ffffff;     float:left;     height:800px;     margin-top:35px;     width:90%;         }         .menu_headline     {     border-bottom:1px solid;     text-align:right;     font-size:12px;     width:150px;     color:#000099;     }

Hi,

wieso lässt du die Breitenangabe nicht ganz weg und platzierst den Container dafür ohne float. Die min-width-Angabe kannst du im body-Selektor unterbringen.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

body     {     margin:0;     padding:0;     background:url(images/bgbody.gif);     background-repeat:repeat-x;   min-width: 740px;     }   #banner     {     background:url(images/top.gif);     background-repeat:no-repeat;     height:68px;     }   #content_left     {     background:url(images/left.gif);     background-repeat:no-repeat;     width:170px;     height:480px;     padding-top:120px;     padding-left:25px;     float:left;     border-right:1px dotted;     } * html #content_left{ margin-right: -3px;}   #main     {     background-color: #ff0;     height: 800px;     margin: 35px 0 0 195px;   /*width:90%;   float:left;*/     } * html #main{ margin-left: -3px;}   .menu_headline     {     border-bottom:1px solid;     text-align:right;     font-size:12px;     width:150px;     color:#000099;     }

min-width wird von IEs kleiner als Version 7 leider noch nicht unterstützt, so dass du auf einen Workaround zurückgreifen musst, wenn du sie auch unterstützen möchtest.

Vielleicht hilft dir das weiter.

Ciao
Quaese