HTML Div-Positionierung

[Denny]

Hi Leute, bei der Modifizierung eines Templates bin ich auf ein kleines Problemchen gestoßen!

Und zwar habe ich oben meine Menüleiste (im folgenden Screenshot erkennbar), der ich nebenan eine Suchleiste anfügen möchte.

Das Problem ist folgendes:

beides hab ich durch Divisions voneinander getrennt und jeweils 80% und 20% Breite vergeben. Sieht bei 1200er Auflösung ganz schick nebeneinander aus. Ziehe ich allerdings den rechten Rand des Browser-Fensters nach links, springt zuerst der rechteste der Menübuttons, gefolgt von der Suchleiste in die nächste Zeile.

Jetzt die Frage: Gibt es so etwas wie absolute Positionierung der Objekte, dass keines davon in die nächste Zeile springt, wenn das Fenster in der Breite verkleinert wird? Mit min-width und position:absolute war ich jedenfalls erfolglos.

Sieht in der index.php (Joomla-Template) erst mal so aus:

  <tr>

    <td><div id="top_menu">

        <div id="top_menu_inner">

          <?php mosLoadModules ( 'user3' ); ?> <!-- Die Menüleiste -->

        </div>

      </div>


	  <div id="top_menu_two">

        <div id="top_menu_inner_two">

           <?php mosLoadModules ( 'user4' ); ?> <!-- Die Suchleiste -->

        </div>

      </div>


	  </td>

  </tr>

So, und das ist ein Ausschnitt aus der dazugehörigen CSS-Datei:

#top_menu {

width : 80%;

float : left;

height : 53px;

padding : 0px;

margin : 0px;

overflow : visible;

background-color : #fafafa;

background-image : url(../images/bg_pagenav.gif);

background-repeat : repeat-x;

min-width: 800px;

}

#top_menu_inner {

	overflow : visible;

	padding-top : 10px;

	padding-left : 60px;

}

#top_menu_two {

width : 20%;

float : left;

height : 53px;

padding : 0px;

margin : 0px;

overflow : visible;

background-color : #fafafa;

background-image : url(../images/bg_pagenav.gif);

background-repeat : repeat-x;

}

#top_menu_inner_two {

	overflow : visible;

	padding-top : 10px;

Vielen Dank im Voraus für Bemühungen!

Hier noch der Screenshot:

[geloescht_JesterDay]

Ziehe ich allerdings den rechten Rand des Browser-Fensters nach links, springt zuerst der rechteste der Menübuttons, gefolgt von der Suchleiste in die nächste Zeile.

Das ist ein absolut normales und auch gewünschtes Ergebnis, allgemein.

Tip: Um beide Divs ein Div bzw bei der Table-Cell den min-Width angeben. Der Umbruch erfolg nämlich genau dann, wenn die elemente nicht mehr in der Breite nebeneinander dargestellt werden können. Gibst du dem darüberliegenden Element eine Breite, die nicht unterschritten werden darf, kommt es nie soweit.

Allerdings unterstützt der IE min-Width erst ab Version 7 AFAIK.

[Denny]

Boaaaaaah geil!!!

Vielen Dank! Du bist der Grund für meinen nun anhaltenden Haarausfall :uli

Schönen Tach noch

regards, Den