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?