Probleme mit Float im Header

[daflowjoe]

Hi Leute, ich hoffe ihr könnt mir helfen.

Ich will das drei Container immer nebeneinander sind. Dabei soll der mittlere Container, wie im Code unten hoffentlich ersichtlich ist, immer mittig sein. Die äußeren Container sollen sich je nach eingestellter Auflösung bzw. Fenstergröße automatisch skalieren und somit den Rest auffüllen.

Es soll vereinfacht gesagt folgendes Schema abgebildet werden:

_________ _ _ _ _ _ _ _ _ _ _ _ _ _ _ __________
....variabel..............fest/mittig.....................variablel

Ich will sozusagen den float erzwingen, momentan ist noch das Problem, dass der Browser den rechten Container auf eine neue Zeile setzt, wenn kein Platz neben dem mittleren Container ist. Außerdem bleibt der mittlere Container einfach nicht mittig.

Ich habe dazu ein bisschen mit Positionierung rumhantiert, allerdings bis jetzt erfolglos.

...Hat jemand eine Idee?

vielen Dank schonmal im Vorraus ;-)

lg joe

Bisher habe ich folgendes versucht:

<!-- ...   HEADCONTAINER ............................................................... -->
	<div style="float: left; position: absolute; height: 241px; background: green;">&nbsp;</div>
	<div style="float: left; margin: 0px auto 0px auto;  width: 1304px; height: 241px; background:red;">&nbsp;</div>
	<div style="height: 241px; position: absolute; background: green;">&nbsp;</div>
	
	
	<div style="clear: both; font-size:0.1em;">&nbsp;</div>

	<!-- ... / HEADCONTAINER ............................................................... -->

 

[Maik]

Hi,

das wird nicht funktionieren, dass in einer dreispaltigen Floatumgebung die beiden äußeren Spalten in der Breite flexibel sind bzw. den zur Verfügung stehenden Platz auffüllen.

 

[daflowjoe]

Gibt es da nicht irgendeine andere Lösung?

Wie gesagt die äußeren Spalten sollen sich selbständig anpassen. Der Header in der Mitte hat eine feste Größe.
http://www.a9z.de/preview.php?file=e0768354c1d5fbce1e907a50f.jpg

 

[Maik]

Da die äußeren Spalten scheinbar nur einen Hintergrund besitzen, könntest du es so umsetzen:

#headercontainer {
height:241px;
background:green;
}

#header {
width:1304px;
height:241px;
margin:0 auto;
background:red;
}

<div id="headercontainer">
    <div id="header"></div>
</div>

 

[daflowjoe]

Danke, aber das hilft mir nicht sehr viel, da die äußeren Spalten verschieden sind.

Auf der linken Seite ist der Balken dünner, als auf der rechten Seite.

Gruss Joe

 

[Maik]

Hi,

mir ist da noch ein mögliches Modell eingefallen:

#leftCol {
float:left;
width:49.5%; /* kleiner als 50% */
height:241px;
background:green;
}

#rightCol {
float:right;
width:49.5%; /* kleiner als 50% */
height:241px;
background:green;
text-align:right;
}

#header {
position:absolute;
left:50%;
margin-left:-400px; /* negative Hälfte von width:800px */
width:800px;
height:241px;
background:red;
}

<div id="headercontainer">
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="header">header</div>
</div>