I’m trying to get two images to float side by side

body {
  width: 100%;
  max-width: 1200px;
  margin-right: 2px;
  margin-left: 2px;
}

.fruit {
  width: 1200px;
  max-height: 39em;
}

img {
  float: left;
}
<div class="fruit">

  <img src="images/OrangesPinkBackground.jpg" alt=" " width="600px" />

  <img src="images/GrapefruitPinkBackground.jpg" alt=" " width="600px" />

</div>

I’ve tried so many different things I can think of and they just keep ending up like this

Maybe it’s a problem with how I have the body styled? because there is a lot more whitespace on the right side where the scroll bar is. What I was trying to was evenly split the two images so they would each take up half the screen and only extend about 40em downwards as well. Somehow I just can’t get them to lineup right.

I’ll take any suggestions at this point.

2 Answers

<div class="fruit">
  <div class="fruit-img"> 
     <img src="images/OrangesPinkBackground.jpg" alt=" "/>
  </div>
  <div class="fruit-img">
     <img src="images/GrapefruitPinkBackground.jpg" alt=" "/>
  </div>

</div>

In your parent fruit class:

.fruit{
display: flex;
align-items:center;
height: 39em;
width: 100%;
}

In your child fruit class for each image, this acts as a container

.fruit-img{
height: 100%;
flex-basis: 50%;
}

This is your actual image class

.fruit-img img{
width: 100%;
height: 100%:
}

You can use flexbox. It’s more easy than using float.

Use flex with:

justify-content: space-between

to get images align at the end of screen on each side

Archive from: https://stackoverflow.com/questions/59040562/im-trying-to-get-two-images-to-float-side-by-side

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *