---
title: "CSS - float - Problem"
url: "https://www.typo3.net/d/83879-css-float-problem"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Frage"]
created: "2008-11-11"
last_reply: "2008-11-11"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# CSS - float - Problem

Frontend › Barrierefreiheit · 2 Antworten · gestartet 2008-11-11

## Eröffnungsbeitrag

**red-trombone** · 2008-11-11 · [Beitrag #1](https://www.typo3.net/d/83879-css-float-problem/1)

Hallo zusammen,

ich hab ein Problem mit CSS. Und zwar will ich die Anzeige einer Extension verändern. Soweit so gut.
Ich hab also eine HTML Datei und ein CSS File.

In einem Grafikprogramm habe ich mir mal das Layout zurecht gelegt. So solls aussehen:

[Bild: ff-pfaffenhofen.de/template.jpg](http://www.ff-pfaffenhofen.de/template.jpg)

Im Editor bahnen sich schon die ersten Probleme an und die einzelnen "Bilder" (Hintergründe der DIV-Tags) werden zu groß dargestellt oder doppelt:

[Bild: ff-pfaffenhofen.de/editor.jpg](http://www.ff-pfaffenhofen.de/editor.jpg)

An was liegt das? Was läuft da mit den Floats schief?
Hier mal der HTML-Code:

```html
<div id="einsatz_border">
  <div id="einsatz_title">
    <h4>###TITLE###</h4>
  </div>
  <div id="einsatz_type">
    <h4 align="center">###TYPE###</h4>
  </div>
<div id="einsatz_border">
  <div id="inner-border">
  <div id="einsatz_time">
  ###DATE_BEGIN###</div>
  <div id="einsatz_time1">
    ###DATE_END###</div>
 <div id="einsatz_location">
  ###LOCATION###</div></div>
  <div id="einsatz_note">
    <p>###DESCRIPTION###</p>
  </div>
  <div id="einsatz_fahrzeuge">
    <ul class="fahrzeuge">
      <!--###CAR_ITEM###-->
    <a href="###LINK###"><img src="###IMAGE###" alt="###NAME###" /><br />
        ###NAME###</a>
    </ul><!--###CAR_ITEM###-->
  </div>
  <div id="einsatz_foot">
    Eintrag erstellt am ###CREATED### ###EDIT_PANEL### <a href="http://www.ff-pfaffenhofen.de/index.php?id=7">[ Zur Übersicht ]</a>
  
</div></div></div>
<h2><br /><br />
```

Die CSS:

```html
#einsatz_border {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	background-color: #FFFFFF;
	height: auto;
	width: 860px;
	float: inherit;
}
#inner-border {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	background-color: #FFFFFF;
	height: auto;
	width: 860px;
	float: inherit;
}
#einsatz_title {
	color: #FFFFFF;
	float: left;
	width: 553px;
	height: 43px;
	background-image: url(template-files/titel.png);
	padding-top: 15px;
	padding-left: 15px;
}
#einsatz_time {
	color: #FFFFFF;
	float: left;
	width: 235px;
	background-image: url(template-files/time1.png);
	height: 47px;
	padding-top: 13px;
	padding-left: 134px;
}
#einsatz_time1 {
	color: #FFFFFF;
	float: left;
	width: 235px;
	background-image: url(template-files/time2.png);
	height: 47px;
	padding-top: 13px;
	padding-left: 132px;
}

#einsatz_location {
	background-color: #8A8484;
	color: #FFFFFF;
	float: left;
	width: 281px;
	height: 47px;
	background-image: url(template-files/time3.png);
	padding-top: 13px;
	padding-left: 133px;
}

#einsatz_type{
	color: #FFFFFF;
	float: left;
	width: 198px;
	height:42px;
	text-align: right;
	background-image: url(template-files/type.png);
	padding-top: 15px;
}
#einsatz_space{
   width: 750px;
   float: center;
   height: 3px;

}
#einsatz_note{
	width: 551px;
	height: 387px;
	float: left;
	background-image: url(template-files/note.png);
	padding-top: 34px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 20px;

}
#einsatz_fahrzeuge{
	width: 200px;
	float: left;
	height: 387px;
	background-image: url(template-files/fahrzeuge.png);
	padding-top: 33px;

}
#einsatz_foot{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	width: 750px;
	float: left;
	height: 21px;
	color: #FFFFFF;
	text-align: right;
	background-image: url(template-files/foot.png);
}
```

Im Moment siehts so aus:
<http://www.ff-pfaffenhofen.de/index.php?id=7>
Dann einfach auf einen Bericht klicken.

Vielleicht findet ja jemand meine Fehler #paralyzed# ... Danke!

Gruß,
red-trombone

## Antworten

### [#2](https://www.typo3.net/d/83879-css-float-problem/2) · einpraegsam.​net · 2008-11-11

Ich habe keine Zeit mir dein CSS anzusehen, aber wenn der Inhalt zu breit wird, gibt es natürlich einen Umbruch.

Hier hilft:
overflow: none;

### [#3](https://www.typo3.net/d/83879-css-float-problem/3) · red-trombone · 2008-11-11

Danke, also habs eingebaut.
Hm ich glaub da ist ein Problem mit padding und dem float.
Kann ich die DIVs auch noch anders anordnen?

---

Quelle: „CSS - float - Problem“, typo3.net, https://www.typo3.net/d/83879-css-float-problem
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.