CSS: Positionierung von DIVs nebeneinader bei variabler Breite

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • CSS: Positionierung von DIVs nebeneinader bei variabler Breite

    Hi!

    Ich habe drei DIVs: content, menu1 und menu2. So soll sie auch nebeneinander auf der Seite erscheinen.
    Dabei soll immer 100% der Seite genutzt werden, der Content soll sich also strecken.

    Bis her habe ich das so gelöst: Content nimmt sich die ganze Breite, rechts daneben setzte ich per position:absolute die beiden Menus. Der Content wird durch ein padding-right dann nach rechts begrenzt, dass der immer Platz für die Menüs lässt.
    Nun habe ich das Problem, dass sich die Menus über den Content schieben, wenn den Anzeigebereich verkleiner. Hier demonstriert durch min-width. Dabei will ich erreichen, dass der Browser ab einer bestimmten Fensterbreite immer horizontal scrollt. Allerdings sollen sich die Menus nicht über den Content schieben.

    Wie kann das lösen? Dazu finde ich keine Möglichkeit, das ohne position:absolute umzusetzen.

    Hier das Beispiel:

    Quellcode

    1. <html>
    2. <head>
    4. <style type="text/css">
    6. #frame {
    7. }
    9. #content {
    10. background: #eee;
    11. padding-right: 400px;
    12. min-width: 500px;
    13. }
    15. #menu1, #menu2 {
    16. width: 200px;
    17. }
    19. #menu1 {
    20. background: #ccc;
    21. position: absolute;
    22. right: 200px;
    23. top: 0px;
    24. }
    26. #menu2 {
    27. background: #ddd;
    28. position: absolute;
    29. right: 0px;
    30. top: 0px;
    31. }
    33. </style>
    35. </head>
    36. <body>
    37. <div id="frame">
    39. <div id="content">
    40. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    41. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    42. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    43. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    44. </div>
    46. <div id="menu1">
    47. Menu 1<br>Menu 1<br>Menu 1<br>Menu 1<br>Menu 1
    48. </div>
    50. <div id="menu2">
    51. Menu 2<br>Menu 2<br>Menu 2<br>Menu 2<br>Menu 2
    52. </div>
    54. </div>
    56. </body>
    57. </html>
    Alles anzeigen
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • Nein, ich glaube mit dem Zentrierungsproblem hat das nichts zu tun.

    Ist es das was du willst?:

    Quellcode

    1. <html>
    2. <head>
    4. <style type="text/css">
    6. #frame {
    7. }
    9. #content {
    10. background: #eee;
    11. position: absolute;
    12. right: 400px;
    13. top: 0px;
    14. overflow: auto;
    15. }
    17. #menu1, #menu2 {
    18. width: 200px;
    19. }
    21. #menu1 {
    22. background: #ccc;
    23. position: absolute;
    24. right: 200px;
    25. top: 0px;
    26. }
    28. #menu2 {
    29. background: #ddd;
    30. position: absolute;
    31. right: 0px;
    32. top: 0px;
    33. }
    35. </style>
    37. </head>
    38. <body>
    39. <div id="frame">
    41. <div id="content">
    42. Bei normalen Text macht er natürlich einen Zeilenumbruch.
    43. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    44. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    45. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    46. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    47. Nur bei langem Text ohne Leerzeichen macht er einen Scollbalken.
    48. Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content_Content
    49. </div>
    51. <div id="menu1">
    52. Menu 1<br>Menu 1<br>Menu 1<br>Menu 1<br>Menu 1
    53. </div>
    55. <div id="menu2">
    56. Menu 2<br>Menu 2<br>Menu 2<br>Menu 2<br>Menu 2
    57. </div>
    59. </div>
    61. </body>
    62. </html>
    Alles anzeigen

  • d0nut schrieb:

    3 Spalten ;) Hinter dem Stichwort hatten wir schon einen Thread.
    Hier eine andere CSS Lösung: 3 DIVs mit CSS zentrieren

    DIVs mit fester Breite zu zentrieren ist ja nicht allzu schwer. ;) Das möchte ich auch gar nicht erreichen. :P

    Hafner schrieb:

    Nein, ich glaube mit dem Zentrierungsproblem hat das nichts zu tun.
    Ist es das was du willst?: <schnipp>

    Fast. Der Content sollte mit dem Menus zusammen aber eine Mindestbreite haben, sodass der Content (variable Breite) mindestens immer X Pixel breit ist. Wenn das Fenster kleiner wird, sollen aber zuerst die Menus aus dem Bild verschwinden, also alle drei DIVs sollen zusammen gescrollt werden.

    Hafner schrieb:

    Wenn du den Content lieber um deine Menus fließen lassen willst, solltest du dich mal mit Floatings (float: right;) beschäftigen.

    Fließen möchte ich eigentlich auch nicht. :)

    Hier mal, wie ich mir das vorstelle, ich hoffe, das macht es verständlicher.
    Alle Boxen haben genug Platz:

    Die Contentbox hat ihre min-width erreicht, die Menus verschwinden rechts aus dem Fenster:


    Generell weiss ich auch nicht, ob das überhaupt möglich ist. ;)

    Gruß
    Max123
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • Das Problem mit den 3 DIVs ist nicht einfach zu löasen. Lies dir den Post einmal durch, wenn du glaubst es ist so einfach. :)


    So, das sollte das sein, was du möchtest:

    Quellcode

    1. <html>
    2. <head>
    4. <style type="text/css">
    6. #frame {
    7. position: absolute;
    8. width: 100%;
    9. min-width: 900px;
    10. }
    12. #content {
    13. background: #eee;
    14. position: absolute;
    15. right: 400px;
    16. left: 0px;
    17. top: 0px;
    18. min-width: 500px;
    19. }
    21. #menu1, #menu2 {
    22. width: 200px;
    23. }
    25. #menu1 {
    26. background: #ccc;
    27. position: absolute;
    28. right: 200px;
    29. top: 0px;
    30. }
    32. #menu2 {
    33. background: #ddd;
    34. position: absolute;
    35. right: 0px;
    36. top: 0px;
    37. }
    39. </style>
    41. </head>
    42. <body>
    43. <div id="frame">
    45. <div id="content">
    46. Bei normalen Text macht er natürlich einen Zeilenumbruch.
    47. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    48. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    49. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    50. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    51. </div>
    53. <div id="menu1">
    54. Menu 1<br>Menu 1<br>Menu 1<br>Menu 1<br>Menu 1
    55. </div>
    57. <div id="menu2">
    58. Menu 2<br>Menu 2<br>Menu 2<br>Menu 2<br>Menu 2
    59. </div>
    61. </div>
    63. </body>
    64. </html>
    Alles anzeigen

  • Ja, genau das habe ich gesucht. :)
    Danke!

    Na klar, den Content auch auf position:absolute setzen, dann gehts.

    Warum ich bei dem Scrollen so penibel bin:
    Es ist einfach unschön, wenn eine Seite total enstellt wird, sobald das Borwserfesnter zu schmal ist. Da sollte eine Webseite irgendwann einfach horizontal scrollen, ohne sich total zu verzerren, denke ich. ;)
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.