Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Lindsay Barrett
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points
Posted by Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

How to make an image and a div the same size

I have a picture and a div filled with text. I want to place the two elements beside each other and keep them the same size even when the scale down.

Here is my current code: https://w.trhou.se/8w56mu7ocf

How can I make the two floated elements the same size, so there is no more white gap at the bottom of the image when it scales down? Thank you!

3 Answers

James Hall-Treworgy
James Hall-Treworgy
3,326 Points
James Hall-Treworgy
James Hall-Treworgy
3,326 Points

Hello! :)

Although, I am not sure how to do the correct way. Here is what I got:

CSS

body {
  margin: auto;
  padding: 10px;
}

body img {
  max-width: 40%;
  padding: 10px 15px;
  border-radius: 5%;
  float: left;
  clear:left;
}

.firstabout {
    clear: both;
}


.about {
    background-color: #FFC155;
    color: #FFFFFF;
  max-height: 100%;
    width: 40%;
  height: 29vw;
  padding: 10px;
  border-radius: 5%;
    float: left;
}

.inside {
    width: 89%;
    margin-left: 1.2em;
}
.button {
    font-size: small;
}

HTML

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <title>index.html</title>
     <link rel="stylesheet" href="normalize.css">
     <link href="styles.css" rel="stylesheet" type="text/css">
     <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/jockey-one:n4:default;asap:n4,n7:default;bebas-neue:n4:default.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="firstabout">
     <div class="aboutpic">
      <img src="Layer_27.jpg" alt="">
     </div>

      <section class="about">
       <div class="inside">
        <h1>ABOUT US</h1>
        <p>LORUM IMPSUM IS SIMPLY A DUMMY TEXT USED FOR THIS BUSINESS. THANK YOU FOR YOUR HELPLORUM IMPSUM IS SIMPLY A TEXT USED FOR THIS BUSINESS. THANK YOU FOR YOUR HELP. OR THIS BUSINESS. THANK YOU FOR YOUR HELP.Y A DUMMY TEXT USED FOR THIS BUSINESS. THANK YOU FOR YOU </p>
          <h3 class="button">READ MORE</h3>
       </div>
     </section>
    </div>
   </body>
  </html>
Samuel Key
Samuel Key
3,310 Points
Samuel Key
Samuel Key
3,310 Points

I think this is the effect that you are looking for. I used a combination of flexbox and media queries so that it is responsive.

https://w.trhou.se/sl9vq8rg62