CODEWITHSUNDEEP
htmlcss
Robert Kraaijeveld
Robert Kraaijeveld

Reputation: 695

CSS: Placing two side by side divs on the same height

I have two divs inside one big container div. The Image and Text divs are positioned side by side using the following HTML & CSS:

       /*Jumbotron**/
       /***********/
       /**********/
       .jumbotron {
         width: 100%;
         overflow: hidden;
         background-color: white;
         padding: 30px;
       }
       .tekst {
         width: 20%;
         float: left;
         margin-right: 200px;
       }
       .image {
         width: 80%;
       }
       .image img {
         float: right;
         width: 200px;
         height: 225px;
         padding: 30px;
       }
<div class="jumbotron">
  <div class="text">
    <h1>Welkom!</h1>
    <p>Welkom! Mijn naam is Robert Kraaijeveld en dit is mijn portfolio!
      <br />Mijn CV, persoonlijke competenties en dossier kunt u via de knoppen onder deze tekst bereiken.</p>
  </div>

  <div class="image">
    <img src="img/pasfoto.jpg" alt="pasfoto">
  </div>
</div>

Now, what I wanted to achieve was that the text div would be to the left, and the image div to the right within the jumbotron div. This succeeded, but unfortunately image does not sit on the same height as the text div.

Does anyone know how I can get the image div to be at the same height as the text div, whilst still being to its' right side?

Upvotes: 1

Views: 1566

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9567

Here's how you can solve this:

Fiddle for side-by-sides at the same height

CSS

.jumbotron {
    width: 100%;
    overflow: hidden;
    background-color: white;
    padding: 30px;
    font-size: 0;
}
.jumbotron > div {
    display:inline-block;
    vertical-align: top;
    font-size: 1rem;
}
.text {
    width: 20%;
}

Explanation

So we got rid of all your floats. You potentially could have solved this by floating both elements, but it potentially could introduce some further problems if you had multiple elements of different heights.

Then, we replaced the float with display:inline-block; as this will treat each div as a layout element that can be sized like a div normally can, but doesn't default to consume all available horizontal space.

Lastly, we set the font-size: 0 on the .jumbotron element so your inline-blocks wouldn't get pushed apart by white space between the end and start of the tags. We then reset the font-size to the default font size using font-size: 1rem.

Hope that helps.

Upvotes: 4

Related Questions