nicht angemeldet
Hallo,
Hat nix geholfen. Erscheint mir auch nicht die richtige Lösung zu sein. Mit overflow regele ich doch, wie sich ein Element innerhalb eines Blocks (zb. Div-Container) verhält, falls es größer als das umgebende Element ist. Das ist in meinem Fall nicht nötig, da die inneren Elemente (<p>-Blöcke) keine festen Größen besitzen. Sie sollen nur spaltenförmig nebeneinander angeordnet werden. Das funktioniert innerhalb des mittleren div-Containers aber irgendwie nicht mehr nach dem Floating-Prinzip.
Jein, mit overflow gibst Du auch den "block-formatting-context" an, schau mal hier.
Für Nichtbrowser (sprich IE<7) geht es auch dem Element "hasLayout" zu verpassen, z.B. mit
height:1%;Diesen Absatz verstehe ich gerade nicht?
Das "hasLayout" ist ein MS-eigenes System. Da google einfach mal nach.
Deinen geposteten Code habe ich um ein div#foo erweitert, dann funktioniert das mit overflow. Eventuell funktioniert das auch ohne zusätzlichen div, wenn Du overflow eben für #inhalt setzt. Das habe ich aber nicht ausprobiert. Der rote Rahmen ist nur zum veranschaulichen und kann wieder verschwinden. Im IE habe ich das so nicht getestet, aber da sollte es, falls es so nicht geht, mit
* html div # foo {
height:1%;
}
auch funktionieren. Musst Du ausprobieren, was da nötig wird.
Alternativ kann man auch am Textende mit einem abschließenden Element und "clear:both;" arbeiten.
netten Tag
^da Powl
ACHTUNG: Hier kommt ein Karton:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0; padding: 0;
border: 1px dashed silver; background-color: #eee;
}
div#Info strong {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
div#Inhalt {
margin: 0 12em 0 16em;
padding: 0 1em;
border: 1px dashed silver;
}
div #foo {
border:1px solid red;
overflow:auto;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 0.5em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Info">
<strong>Info-Box</strong>
<p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.</p>
<p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
die Angabe einer Breite verzichtet werden und die Seite den ihr zur
Verfügung stehenden Raum ausnutzen.</p>
<p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
</div>
<div id="Inhalt">
<div id="foo">
<h1>CSS-basierte Layouts</h1>
<h2>3-spaltiges Layout</h2>
<div style="float:right; ">
<p style="float:right; ">In diesem Beispiel ist die Breite der Navigation etwas reduziert,
um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
die Schriftgröße der Navigation und Info-Box ist etwas verringert,
um den relativ geringen Breiten Rechnung zu tragen.</p>
<p style="float:right; ">Nur für die äußeren Boxen ist eine Breite und float angegeben.
Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
<p style="float:right; ">Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
gehalten und passt sich flexibel an die Fensterbreite an.</p>
<!-- <div style="clear:both"></div> -->
</div><!-- #foo geschlossen -->
</div>
</div>
</body>
</html>