nicht angemeldet
drei Spalten, dritte Spalte soll sichtbaren Bereich füllen
Grüß Euch,
folgendes Problem, eigentlich recht simpel, denk ich, hab aber noch keine Lösung bzw. noch nicht das passende Beispiel gefunden:
Habe drei CSS-Spalten. Von links nach rechts sollen die erste und die zweite Spalte fixe Breiten verpasst bekommen, die dritte dagegen soll nach rechts den sichtbaren Bildschirmbereich ausfüllen.
Habe definiert:
CSS:
--------------------------------------------------------------------
#leistenzeile
{
width: 100%;
}
#leiste_links
{
background: #035880;
position: absolute;
top: 88px;
left: 0px;
width: 170px;
height: 30px;
margin: 0px;
padding: 0px;
border: 1px solid #fefefe;
border-left-width: 0px;
}
#leiste_mitte
{
background: #4080a0;
position: absolute;
top: 88px;
left: 171px;
width: 600px;
height: 30px;
margin: 0px;
padding: 0px;
border: 1px solid #fefefe;
border-left-width: 0px;
border-right-width: 0px;
}
#leiste_rechts
{
background: #035880;
position: absolute;
top: 88px;
left: 770px;
width: auto;
height: 30px;
margin: 0px;
padding: 0px;
border: 1px solid #fefefe;
border-right-width: 0px;
}
--------------------------------------------------------------------
HTML-Code:
--------------------------------------------------------------------
<div id="leistenzeile">
<div id="leiste_links">
d
</div>
<div id="leiste_mitte">
d
</div>
<div id="leiste_rechts">
d
</div>
</div>
--------------------------------------------------------------------
Das mit den border-Angaben ist wohl Unfug, muss ich noch sauber zurechtbauen am Ende, aber es geht jetzt erstmal um die Anordnung in der gewünschten Breite.
Leider erzielt die Angabe
width: auto;
für leiste_rechts nicht das gewünschte Ergebnis, denn die Spalte ist dadurch genau so breit, dass der Inhalt reinpasst und kein bisschen breiter.
Wie lässt sich das hinbekommen? Die dritte Spalte soll wie gesagt einfach den sichtbaren Bildschirmbereich nach rechts füllen, jedoch nicht über diesen Bereich hinausgehen (was z.B. bei width: 100% der Fall wäre), dass unten dann Scrollbars aufgehen...
tschüss erstmal vom CSS-Anfänger
-
Na ok, scheint ohne Weiteres nicht zu gehen, kein Beispiel auffindbar.
Dann muss ich die dritte Spalte wohl in einen Hintergrund-Layer mit 100% Breite auslagern und dann "den Rest" drüberklatschen, irgendwie so wird es wohl gehen. ;)
-
Man möchts nicht glauben, aber das geht sogar ziemlich einfach und wieder was gelernt... ;)
-
Man möchts nicht glauben, aber das geht sogar ziemlich einfach und wieder was gelernt... ;)
Haha. Dein selbsgespraech in Ehren. Aber moechtest du den geneigten Lesern und Loesungssuchenden nicht Deine Erkenntnisse mitteilen?
Ich nehme an, sowas wie
<div>
ich floate links mix x Breite
</div>
<div>
ich floate auch links mit y Breite
</div>
<div>
Ich haeng hier einfach so rum
</div>liegt nah an deiner Loesung? ;)
-
Dein selbsgespraech in Ehren.
Hoffe, es hat Dir gefallen. ;)
Kurz und bündig:
Bei solchen Auffüll-Konstruktionen, die sich mit auto nicht lösen lassen, einfach Breite bzw. Höhe der Layer-Klasse auf 100% setzen und dann die ganzen Layer unter Verwendung von z-index übereinanderstapeln, bis es passt. Zwar immer noch nervig genug, bis es auch so in allen Browsern (haargenau gleich) funktioniert, die Herausforderung für den Anfänger liegt da im Detail, aber machbar.
So, ist spät geworden, jetzt legt Euch mal hin und schlaft gut. ;)
-
-
-