• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dynamische Höhe Div-Box

J

jukrali

Neues Mitglied
Hallo zusammen
ich fürchte, ich stehe gerade mächtig auf dem Schlauch. Vielleicht kann mir hier jemand helfen.
Folgendes Problem: Neben einem Bild würde ich gern unten bündig einen Text platzieren.
Dazu habe ich einen großen Div-Container erstellt (bereich), in den ich zwei kleinere Div-Container (box1 und box2) platziert habe. Der große Container passt sich in seiner Höhe auch wie gewünscht an die Höhe des jeweils höheren kleinen Div-Containers an. Auch der Text platziert sich unten bündig im Container box2.
Nun müsste sich nur noch der Container box2 auf die volle Höhe des großen Containers ausdehnen, damit der Text auch wirklich unten steht. Und genau das bekomme ich nicht hin. Wo liegt mein Denkfehler?
Vielen Dank schon im Voraus für Eure Hilfe.
jukrali


Hier ist mein aktueller Arbeitsstand:

<html>

<style>
#bereich {
width: 1000px;
height: auto;
background-color: #FFFFFF;
border: solid;
display: table-cell;
}

#box1 {
position: relative;
width: 460px;
padding: 20px;
float: left;
background-color: #AAFFAA;
}

#box1 img {
width: 400px;
}

#box2 {
position: relative;
width: 500px;
height: 100%;
background-color: #1188FF;
display: table-cell;
vertical-align: bottom;
}

.text {
vertical-align: bottom;
}

</style>


<body>

<div id="bereich">
<div id="box1"><img src="..."/></div>
<div id="box2"><p class="text">Text, der unten b&uuml;ndig stehen soll in einem blauen Feld, das so hoch ist wie das gr&uuml;ne.</p></div>
</div>

</body>
</html>
 
Hallo

Wobei die Lösung mit den beiden unnötigen div veraltet ist. Die aktuelle und zukunftsträchtige Lösung sieht eher folgendermaßen aus, wobei noch einige px-Werte durch rem ersetzt werden sollten:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Bild mit Text</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      section {
         width: 1000px;
         border: solid;
         display: flex;
      }
      img {
         background-color: #AAFFAA;
         width: 480px;
         padding: 20px 30px;
         margin-right: 40px;
      }
      p {
         background-color: #1188FF;
         width: 500px;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         margin: 0;
      }
   </style>
</head>
<body>
   <section>
      <img src="..."/>
      <p>Text, der unten bündig stehen soll in einem blauen Feld, das so hoch ist wie das grüne.</p>
   </section>
</body>
</html>

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben