Float Div im Div mit höhe 100%

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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?

    Source Code

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


    Source Code

    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. }
    8. #right {
    9. float: left;
    10. height:100%;
    11. width: 150px;
    12. background: #84d5fa;
    13. }
    14. #left {
    15. float: left;
    16. height:100%;
    17. width: 450px;
    18. background: #19e5fb;
    19. }
    Display All



    #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, ich danke dir schonmal für deine Antwort. Auf die Idee bin ich gestern beim rumversuchen auch schon gekommen, hatte aber leider absolut nichts bewirkt.

    Source Code

    1. <div id="content">
    2. <div id="left">Text1</div>
    3. <div id="right">Test2</div>
    4. <div style="clear:both"></div>
    5. </div>


    Ich komme immoment einfach nicht drauf, wieso das ganze nicht so will wie ich.
  • Hey, ja dem Body habe ich die 100% gegeben. Also hier mal das Testscript.

    Source Code

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


    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.