Float Div im Div mit höhe 100%

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

  • Float Div im Div mit höhe 100%

    Hey Leute, lange Zeit keine Hilfe benötigt nur heute habe ich irgendwie eine Denkblokade.

    Also ich habe ein haupt Div-Container dessen Höhe unbestimmt sein soll. Sprich er soll mit dem Inhalt wachsen können.
    In dem Div sind zwei nebeneinander liegende Divs mit Inhalt. Diese sollen sich an die höhe von #content anpassen.
    Das Problem bei der Sache ist, dass ich #content eine feste höhe geben muss damit die beiden Divs die höhe annehmen. Aber dann ist #content ja nicht mehr dynamisch sondern statisch und wächst nicht mehr mit dem Inhalt.

    Wie löse ich das Problem jetzt?

    Quellcode

    1. <div id="content">
    2. <div id="left">Text1</div>
    3. <div id="right">Test2</div>
    4. </div>


    Quellcode

    1. #content {
    2. margin: 0 auto;
    3. //height:500px;
    4. padding: 20px 20px 20px 20px;
    5. border-left : 1px solid #000;
    6. border-right : 1px solid #000;
    7. }
    9. #right {
    10. float: left;
    11. height:100%;
    12. width: 150px;
    13. background: #84d5fa;
    14. }
    16. #left {
    17. float: left;
    18. height:100%;
    19. width: 450px;
    20. background: #19e5fb;
    21. }
    Alles anzeigen



    #content mit fester höhe:

    #content ohne feste höhe (wie eigentlich gewünscht nur sollen die beiden divs die gleiche höhe haben)

  • Hey, ja dem Body habe ich die 100% gegeben. Also hier mal das Testscript.

    Quellcode

    1. <style type="text/css">
    2. html, body {
    3. background : #fff;
    4. color : #000;
    5. margin : 0 auto;
    6. height:100%;
    7. }
    9. #right {
    10. float: left;
    11. width: 150px;
    12. background: #84d5fa;
    13. }
    15. #left {
    16. float: left;
    17. width: 450px;
    18. background: #19e5fb;
    19. }
    21. #content {
    22. margin: 0 auto;
    23. }
    24. </style>
    29. <div id="content" style="width:600px;border:1px solid #000">
    30. <div id="left">
    31. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
    32. aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut,
    33. sollicitudin eu, adipiscing id, lacus. Pellentesque scelerisque. In
    34. quam nunc, vulputate adipiscing, tincidunt nec, faucibus eget, libero.
    35. Integer nec nisi. Praesent iaculis posuere elit.</p>
    37. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
    38. aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut,
    39. sollicitudin eu, adipiscing id, lacus. Pellentesque scelerisque. In
    40. quam nunc, vulputate adipiscing, tincidunt nec, faucibus eget, libero.
    41. Integer nec nisi. Praesent iaculis posuere elit.</p>
    43. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
    44. aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut,
    45. sollicitudin eu, adipiscing id, lacus. Pellentesque scelerisque. In
    46. quam nunc, vulputate adipiscing, tincidunt nec, faucibus eget, libero.
    47. Integer nec nisi. Praesent iaculis posuere elit.</p>
    49. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
    50. aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut,
    51. sollicitudin eu, adipiscing id, lacus. Pellentesque scelerisque. In
    52. quam nunc, vulputate adipiscing, tincidunt nec, faucibus eget, libero.
    53. Integer nec nisi. Praesent iaculis posuere elit.</p>
    54. </div><!--End Left-->
    58. <div id="right">
    59. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
    60. aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut,
    61. sollicitudin eu, adipiscing id, lacus. Pellentesque scelerisque. In
    62. quam nunc, vulputate adipiscing, tincidunt nec, faucibus eget, libero.
    63. Integer nec nisi. Praesent iaculis posuere elit.</p>
    64. </div><!--End Right-->
    66. <div style="clear:both"></div>
    68. </div>
    Alles anzeigen


    Ergebnis ist das:

  • Hey auf der Suche nach einer Lösung bin ich auf dieses Template gestoßen. Das ganze arbeitet mit einem DIV-Container welcher einen Border links und einen Border rechts benutzt. Die Texte werden in dem Hauptdiv via float left und float right ausgerichtet.
    Somit hat man absolut kein Problem, dass die Div's nicht gleichmäßig die höhe anpassen da es in wirklichkeit nur eins ist, welches durch die farblichen Border das ganze "abtrennt"

    Divs in gleicher höhe und nebeneinander


    Falls jemanden trotzdem noch eine Lösung für mein Problem hat nehme ich das gerne auch noch an. Man lernt nie aus und kommt sicherlich nocheinmal in so eine Situation.
    Danke für die Hilfe bisher.