Umbruch vermeiden?!

[Forumsgast]

Hallo

Dieses soll in einer Zeile dargestellt werden:

<div id="top">
<div class="topTitle"><h2 class="topTit1">=></h2></div>
<div class="topTitle"><h1 class="topTit">erster Teil</h1></div>
<div class="topTitle"><h2 class="topTit">zweiter Teil</h2></div>
<div class="logo">[img]images/logo2.png[/img]</div>
</div>

mit diesem CSS

.topTitle {color:#ffff33;float: left;}

h1.topTit {color:#F3FFEF;font-size: 170%;
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
font-weight: lighter;
letter-spacing: 5px;

}
h2.topTit {color:#96B2CA;font-size: 130%;
letter-spacing: 1pt;
margin-left:20px;
margin-top:28px;
font-weight: lighter;
}
h2.topTit1{color:#96B2CA;font-size: 120%;
letter-spacing: 1pt;
margin-left:20px;
margin-top:23px;
font-weight: lighter;
}

.logo {float: right;}

Dabei passiert es, wenn ich den Bildschirm verkleinere, dass das Bild rechts in die zweite "Zeile" rutscht. Das möchte ich natürlich nicht!

wie kann ich das Verrutschen verhindern?

Grüße
Bruno

[Forumsgast]

Wenn der Bildschirm zu klein wird, um alle Elemente in einer Zeile darzustellen, wird eben umgebrochen. Das ist bei normalem Text ja auch der Fall.

Horizontale Scrollbalken willst du ja nicht wirklich haben ..

[Forumsgast]

Eigentlich doch - da mir sonst das restliche Layout "verhagelt" wird.

Grüße
Bruno

[Forumsgast]

Dann benutz statt float:left ein display:inline, das sollte tun.

[Forumsgast]

Hallo MR Zerling!
habe es eben ausprobiert - leider erscheint dann alles EINE Zeile (ca 80 px) tiefer.
Grüße
Bruno

[Forumsgast]

Du willst es ja auch in einer Zeile?!