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.