HTML/CSS Text geht über div-Box hinaus

[atwo]

Moin,

Casus Knaktus ist eine Projektwebsite, bei der die Typografie nicht so ganz will, wie ich es will. Aussehen soll der Spaß so, sprich die Zahlen 4, 3 und 2 sind auf einer Linie mit dem nebenstehenden Text:



In allen anderen Browsern außer Safari sind die Zahlen allerdings über die div-Box nach oben gezogen und ragen über die div-Box hinaus. Der entsprechende Code sieht so aus:

	<div id="content">
			<div id="about">
				<p class="eins">4</p>					
			</div>

			<div id="content_2">
				<p class="zwei">kreative Köpfe suchen...</p>						
				<div class="background_foto"><img src="https://glotze.tv/zweipunktnull/Bilder/jasmin.png" alt="Jasmin"></div>
				<div class="background_foto"><img src="https://glotze.tv/zweipunktnull/Bilder/jakob.PNG" alt="Jakob"></div>
				<div class="background_foto"><img src="https://glotze.tv/zweipunktnull/Bilder/sarah.png" alt="Sarah"></div>
				<div class="background_foto"><img src="https://glotze.tv/zweipunktnull/Bilder/sabine.png" alt="Sabine"></div>				
			</div>

			<div id="content_3">
				<p class="drei">junge Autoren und Autorinnen</p>
			</div>
	</div>

#content {
	margin: 340px auto 0px auto;
	padding: 20px;
	width: 960px;
	height: 2300px;
	border: none;
}

#about {
	width: 180px;
	height: 300px;
	border: none;
	float: left;
	margin-top: 0px;
}

#content_2 {
	float: right;
	width: 780px;
	height: 300px;
	border: none;
}

#content_3 {
	width: 960px;
	height: 100px;
	border: none;
	float: left;
}

p.eins {
	font: 350px 'Lobster13Regular', Arial, sans-serif;
	letter-spacing: 0;
	text-align: center;
	margin: 0;
}

Bin mittlerweile ziemlich betriebsblind und wäre dankbar, wenn jemand mal ganz unvoreingenommen schaut, wo der Fehler liegen könnte.

Danke und einen schönen Sonntag euch,
atwo

 

[theHacker]

Moin,

ich habs jetzt nicht ausprobiert, aber was mir sofort auffällt, dass du nichts im CSS hast, um deinen Spezialfall zu beschreiben. Setz doch mal vertical-align ein, um den Browsern zu sagen, wie der Text und der Rest (also deine 4 Kringel mit den Bildern) vertikal zueinander liegen sollen.

Infos: https://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align