Layout problem -Div Box verschiebt sich

[brainsucker]

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:

<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:

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;
	}

 

[Quaese]

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.

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