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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Alex Thomas
Alex Thomas
4,247 Points
Posted by Alex Thomas
Alex Thomas
4,247 Points

Placing images side by side and making them responsive

I am trying to place two images side by side and have them scale to browser size. I cannot seem to make it work. Is there a simple solution? I can't post the code as there is personal info in it. Also, do I need to resize the pics with Paint? I don't have photoshop and can't afford it. Any help will be greatly appreciated.

3 Answers

Hannah Trewern
Hannah Trewern
13,429 Points
Hannah Trewern
Hannah Trewern
13,429 Points

Hi Alex,

In CSS file set width value to 50% and display value to inline-block

Alex Thomas
Alex Thomas
4,247 Points
Alex Thomas
Alex Thomas
4,247 Points

width value of each image? do i place them both in a single div? or no div? do i give each img a class or id. I'm totally confused. Also, I can't get my footer to stay at the bottom of the page as there isn't that much content. how do i fix that? Thx for your help

Joseph Dunleavy
Joseph Dunleavy
191 Points
Joseph Dunleavy
Joseph Dunleavy
191 Points

img { max-width: 50%; display: Inline-block; }

Alex Thomas
Alex Thomas
4,247 Points
Alex Thomas
Alex Thomas
4,247 Points

Well, i got em side by side, but it render's terrribly. Looks awful Do I need to resize the pics in Paint or something? Is there a standard size that should be used? And for some reason, they drop below the footer.

Kate Ross
seal-mask
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points
Kate Ross
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points

Hi Alex,

If the images are rendering badly when you scale them up you probably need higher quality images. Resizing them won't do anything if the original image is too small. What size are the originals? For half the width of the screen I would suggest images with a resolution of at least 720px wide.

Place both images in a single parent element. You can give them both the same class if you have other images on the page. Place the footer below the parent element. Here's an example of what your code should look like.

     ```html
      <div class="parent">
        <img class="half-page-image" src="myimage1.jpg">
        <img class="half-page-image" src="myimage2.jpg">
      </div>
      <footer></footer>
      ```

CSS

.half-page-image {
  width: 50%;
  display: inline-block;
}

If they still aren't displaying next to each other, try bringing the width down a little bit more to something like 45%.

A great and much cheaper alternative to photoshop is sketch. Teamtreehouse were offering a discount in their student perks but I'm not sure if they're still doing that.