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 trialAlex Thomas
4,247 PointsPlacing 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
13,429 PointsHi Alex,
In CSS file set width value to 50% and display value to inline-block
Joseph Dunleavy
191 Pointsimg { max-width: 50%; display: Inline-block; }
Alex Thomas
4,247 PointsWell, 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
Full Stack JavaScript Techdegree Student 19,434 PointsHi 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.
Alex Thomas
4,247 PointsAlex Thomas
4,247 Pointswidth 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