Jens Müller: Übergroße Elemente mit float-Navigation

Beitrag lesen

Guten Abend!

Ich habe auf meiner Homepage einen Navigationsbereich, welcher mit float:left positioniert ist. Das Ganze sieht dann ungefähr so aus:

+--------------------------------------------------------+
|                                                        |
|        +---------------------------------------------+ |
|        |                                             | |
| +------+-------+   Überschrift                       | |
| | - Bla        |                                     | |
| | - Bla2       |   Textextextext                     | |
| | - Bla3       |   Nochmehrtextextext                | |
| | - Bla4       |   Text                              | |
| |              |   Text                              | |
| +------+-------+   Text                              | |
|        |           Text                              | |
|        | Und hier vorne geht der Text schönerweise   | |
|        | weiter...                                   | |
|        |                                             | |
|        +---------------------------------------------+ |
+--------------------------------------------------------+

Wenn ich allerdings nun dorthin, wo der Text steht, ein Bild setze, das breiter ist als das Browserfenster wird das Bild unschönerweise nach unten verschoben:

+--------------------------------------------------------+
|                                                        |
|        +---------------------------------------------+ |
|        |                                             | |
| +------+-------+   Überschrift                       | |
| | - Bla        |                                     | |
| | - Bla2       |                                     | |
| | - Bla3       |                                     | |
| | - Bla4       |                                     | |
| |              |                                     | |
| +------+-------+                                     | |
|        |                                             | |
|        |  +------------------------------------------+-+-------+
|        |  | [Übergroßes Bild]                                  |
|        |  |                                                    |
|        |  +------------------------------------------+-+-------+
|        |                                             | |
|        |                                             | |
|        +---------------------------------------------+ |
+--------------------------------------------------------+

Wie erreiche ich jetzt Folgendes:

  • Dass das Bild den Text-Kasten soweit ausdehnt, dass es nicht über seinen Rand hinausragt
  • Dass das Bild nicht nach unten verschoben wird, sondern direkt über der Überschrift erscheint?

Ich bedanke mich schon mal im Voraus.

Einen schönen Abend noch,
Jens