✔ IE7 verschiebt div bei Änderung der Fensterbreite

janoc

janoc

Erfahrenes Mitglied
Hi Leute,

ich versuche gerade eine kleines Layout völlig ohne Tabellen hinzubekommen. Mit diversen CSS-Tutorials und Ressourcen im Web bin ich soweit gekommen:


CSS: 
body {
	background-color: #000;
	margin: 0px;
	padding: 0px;
}


#kopf {
	padding: 20px;
	margin: 0px;
	background-color: #666;
}

#navi {
	width: 110px;
	margin: 0;
	float: left;
	height: auto;
	padding: 20px;
	background-color: #FFF;
}

#content {
	margin: 0px;
	padding: 20px 20px 20px 170px;
	background-color: #CCC;
}
#content p {
	margin: 0px;
	padding: 0px;
	width: 500px;
}

HTML: 
<div id="kopf">
Header hierher<br>
</div> 

<div id="navi">
Navigation<br>
Link 1<br>
Link 2<br>
Link 3<br>
...<br>	
</div> 

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat arcu eget elit.Integer enim leo, hendrerit ac, porta eu, ornare id, nunc. Aliquam sit amet purus. Ut tempor. Nam ipsum. Praesent posuere </p>
<p>Massa sit amet pretium molestie, quam augue rutrum lorem, sit amet luctus velit quam ac orci.  Aliquam eleifend. Nulla viverra erat id ipsum. Vivamus magna. Cras sed lectus. Fusce libero  lacus, suscipit eu, tincidunt quis, interdum vitae, neque. Vestibulum nec risus eu est rhoncus posuere. Etiam accumsan quam vel mi.</p>
</div>



a) Ist das CSS soweit "handwerklich" korrekt?

b) Wenn im IE7 die Größe vom Browserfenster zu schmal ist, springt der Inhalt vom Contentbereich nach unten - so dass die Höhe vom Menü (also dem "navi" div) frei bleibt.
Wie kann ich das umgehen, bzw. mit welchen Stichwörtern komme ich bei der Suche weiter?

c) Wenn ich wollte, das der weiße Hintergrund vom "navi" oder auch vom "content" unabhängig von der Menge an Inhalt bis an den unteren Browserfensterrand reicht, wie ist das machbar? "height: 100%;" bringt ja nichts.

c2) Dass "content" div am linken Fensterrand beginnt und der Inhalt durch margin soweit nach rechts verschoben wird ist soweit richtig? Ginge das anders, also dass das (der?) div erst am rechten Rand vom "navi"-DIV beginnt?
Diese "Überschneidung" fühlt sich nämlich irgendwie falsch an ... :)



Sorry für die vielen Fragen. :) Aber wenn man nicht genau weiß was eigentlich das Problem ist, fällt das Suchen mitunter schwer. Hab mich darum bemüht ausführlich zu sagen worum es mir geht.

Bin für jeden Hinweis dankbar!

Grüße!
 
Zuletzt bearbeitet:
Hi,

was das Umbrechen der rechten Spalte bei einem zu kleinen Viewport betrifft, liesse sich dieses Verhalten im IE7 durch eine Mindestbreite min-width abstellen, die für ein übergeordnetes DIV-Blockelement definiert wird, das die derzeitigen Seitenbereiche in sich aufnimmt:

HTML: 
<body>
    <div id="wrap"> <!-- Hier folgt der Bestand --> </div>
</body>
CSS: 
#wrap {
        min-width:690px;
}

Der Artikel AnyColumnLongest listet diverse Techniken auf, um sog. "Equal-Height-Columns" in einem Layout zu erzeugen.

Anstelle des linken Innenabstandes könntest du für #content auch einen linken Außenabstand definieren, so beginnt dieser Block erst neben dem Navigationsblock:

CSS: 
#content {
        margin: 0px;
        padding: 20px 20px 20px 20px;
        margin-left: 150px;
        background-color: #CCC;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück