Div-Breiche verschoben und kein Zeilenumbruch

[Till]

Bei mir besteht der Kopf einer Seite auf Folgender Struktur:

<div id="head"><a name="header"></a>
<div id="headleft"><img
src="....jpg"
alt="Logo: ..."
title="Logo: ..." /> <jdoc:include
type="modules" name="user1" style="xhtml" /></div>
<div id="headcenter">
<p>Slogan<br />
Slogan weiter</p>
</div>
<div id="headright">
</div>

bei folgendem CSS

#headleft {
float:left;
left:0;
min-height:150px;
min-width:230px;
position:relative;
}
#headcenter {
float:left;
left:0;
padding-top:1em;
right:0;
}

#headcenter {
height:11em;
margin:auto;
}
#headright {
float:right;
padding-right:1.5em;
padding-top:0.5em;
text-align:right;
width:11em;
}

#headright {
top:0;
float:none;
position:relative;
right:0;
text-align:right;
}

Die drei divs sollen also nebeneinander stehen.
Nun habe ich das Problem,, dass ich möchte dass headright und headleft stehen bleiben und bei headcenter der Slogan umgebrochen wird wenn der Platz nicht ausreicht, jedoch wird zuerst der headright in eine andere Zeile gegstellt und bei headcenter gibt es ebenfalls keinen umbruch sondern auch der wird, wenn der Platz nicht ausreicht in eine neue Zeile gestellt.
Wie kann ich das verhindern?

[Thomas Luethi]

Hallo,

1. Sind das an den Browser ausgelieferte HTML und CSS valide?
(Ich habe so meine Zweifel bei <jdoc> - was ist das denn wieder?)

2. Das beschriebene Verhalten ist durchaus normal bei Floats.
Für ein starres Nebeneinander von 3 Boxen müsstest Du vermutlich
andere Methoden wählen, z.B. Positionierung oder eine Tabelle (duck!).

3. Enthalten die beiden DIVs headleft und headright tatsächlich
keinen Inhalt (ausser dem leeren Anker bei headleft)?
Was ist der Sinn dieser DIVs?
Ich vermute, Du hast hier überflüssiges HTML, nur um irgendwelche
optischen Effekte zu erreichen.
Falls es um Dekoration geht, könntest Du es vermutlich mit
Hintergrundbildern lösen.

Am besten stellst Du ein Online-Beispiel ins Netz oder
beschreibst zumindest etwas genauer, was Deine Idee ist.

Freundliche Grüsse, Thomas

[MudGuard]

Hi,

1. Sind das an den Browser ausgelieferte HTML und CSS valide?
   (Ich habe so meine Zweifel bei <jdoc> - was ist das denn wieder?)

Oder mal wieder ein Fall, bei dem zu einem clientseitigen Problem serverseitiger Code geliefert wird.

2. Das beschriebene Verhalten ist durchaus normal bei Floats.
   Für ein starres Nebeneinander von 3 Boxen müsstest Du vermutlich
   andere Methoden wählen, z.B. Positionierung oder eine Tabelle (duck!).

float:left, float:right, float:none.
Allerdings mit geänderter Reihenfolge der Dokumentinhalte.

3. Enthalten die beiden DIVs headleft und headright tatsächlich
   keinen Inhalt

Welchen Inhalt könnte headleft (Kopfvergessen) schon haben?
Kopfrecht sagt mir auch recht wenig (vielleicht analog zu Leibrecht/Leibeigenschaft)?

(ausser dem leeren Anker bei headleft)?

der auch noch überflüssig ist, da das div sowieso schon eine id hat, die als fragment identifier dienen kann.

cu,
Andreas