[gelöst] Fixes Layout mit scrollbarem Inhalt

[nockenfell]

Das Clearing funktioniert noch immer nicht. Die üblichen Bugs haben nicht darauf angesprochen. (Guillotine Bug)

[NaN]

Ich habe jetzt leider keinen IE zur Hand um das zu testen.
Aber was mir meistens geholfen hat ist folgendes:

CSS:

Code: Select all

div#menu {
	width : 205px;
	float : left;
}

div#rahmen {
	width : 730px;
	float : left;
	padding : 10px;
	height : 498px;
	background : #cccccc;
}

.clearb {
	clear: both;
}

HTML:

Code: Select all

<div id="main">
	<div id="menu">
		{menu ... }
		<div class="clearb"></div>
	</div>
	<div id="rahmen">
		{content}
		<div class="clearb"></div>
	</div>
</div>

[mike-r]

Allerdings nicht mit Safari 4. Hier wird weder der Scrollbalken angezeigt, noch lässt sich der Inhalt scrollen.

Ist zwar nicht ganz meine Baustelle, aber ich schau mir das mal an, und leite es weiter.

[nockenfell]

Ich habe jetzt leider keinen IE zur Hand um das zu testen.
Aber was mir meistens geholfen hat ist folgendes:
.....

Funktioniert leider nicht.

[nicmare]

alter, das funktioniert 100pro. das haben schon unsere urahnen so gemacht!
nicht gleich jammern. bissl mit den werten experimentieren, troubleshooting betreiben! den divs ne border zuweisen damit du siehst, wie die sich verhalten etc.
von der ferne können wir da ja auch ncihts machen.

[dylan]

alter, das funktioniert 100pro. das haben schon unsere urahnen so gemacht!

In IE7, Firefox3 u. Safari4 funktioniert es so nicht, der content schießt über den div rahmen hinaus, die Angabe overflow fehlt. Ist aber schon mehrfach erwähnt worden.

Probiere es mal so:

body {
background-color : #eee;
}
#main {
width : 750px;
background-color : #fff;
}
#menu {
width : 200px;
float : left;
background-color : #ccc;
}
#rahmen {
width : 530px;
height : 498px;
overflow : auto;
float : left;
padding : 10px;
overflow : auto;
}
#clearb {
clear : both;
}

und



menu


content





Für IE musst du wegen des paddings leider noch sep. Angaben hinzufügen:



#rahmen {width:550px;}

[nockenfell]

alter, das funktioniert 100pro. das haben schon unsere urahnen so gemacht!

In IE7, Firefox3 u. Safari4 funktioniert es so nicht, der content schießt über den div rahmen hinaus, die Angabe overflow fehlt. Ist aber schon mehrfach erwähnt worden.

Danke für deinen Hinweis. Durch deinen Code konnte ich das Problem lokalisieren:

der Aufbau ist bei mir

Code: Select all

<div id="header"><h1><a href="#">marianne klein-abend</a></h1></div>
<div id="main">
<div id="menu">
Menu
</div>
<div id="rahmen">
 <div id="content">
 
Content
 
 </div>
 </div>
<div class="clearb"></div>
 </div>

Nun musste ich den #main Container in der Breite vergrössern. Danach funktioniert es auch mit dem IE6. Sobald dieser zu klein wird, schiebt es den #rahmen Container nach unten.

Den IE7 Fix brauche in in diesem Fall nicht.

Somit ist der Thread für mich gelöst. Herzlichen Dank an alle die mitüberlegt und probiert haben und mir somit die Lösung ermöglicht haben.