Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 14.05.2009, 10:54
pixel24 pixel24 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2007
Beiträge: 97
pixel24 befindet sich auf einem aufstrebenden Ast
Standard 3 Bereiche nach rechts floaten, zusammen 100%

Hallo zusammen,

ich würde gerne ein elastisches Layout (glaube das heist so) erstellen. Es sollen drei Bereiche nebeneinander nach rechts floaten. Im linken (header1) und im rechten (header3) sitzt jeweils eine Grafik, somit ist die Breite dieser beiden Container vorgegeben. Der mittlere Bereich (header3) soll immer den gesamten verfügbaren Platz zwischen header1 und header3 ausfüllen. Wie kann ich sowas realisieren?
Ich möchte, wenn es irgendwie möglich ist keinen Zusatzkontainer (Wrapper) umd die Bereiche legen.

Bisher sieht es so aus:
HTML-Code:
    <body>
        <div id="header1">
            Header1
        </div>
   		<div id="header2">
            Header2
        </div>
		<div id="header3">
            Header3
        </div>
   
        <div id="headnav1">
            <ul>
[...]
HTML-Code:
#header1 {
	width: 400px;
	background-color: orange;
	float: left;
	padding-left: 20px;
}
#header2 {
	background-color: yellow;
	float: left;
}
#header3 {
	width: 200px;
	background-color: green;
	float: right;
}
Das Ergebnis sieht so:



aus. Header zwei ist nur so groß wie sein Inhalt.
Mit Zitat antworten
Sponsored Links