CODEWITHSUNDEEP
htmlcsscss-float
seandaniel
seandaniel

Reputation: 151

How to float two images side by side without changing their height and width?

For a school project, I am trying to recreate this:

enter image description here

The first picture is 501x850 and the second picture is 1050x425.

HTML

  <section class="clearfix">
    <img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
    <img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
    <div class="feature">
      <h3>Feature</h3>
      <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
      <a href="#" class="button">Read More</a>
    </div>
  </section>

CSS

.button {
  background-color: #16D6D1;
  padding: .9rem 2rem;
  border-radius: 6px;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
  size: 1.9rem;
  font-weight: 700;
}

.eurovan {
  width: 35%;
}

.boat {
  width: 65%;
  float: right;
}

.feature {
  width: 65%;
  background-color: #F6F8FA;
  float: right;
}

The design I need to recreate has the picture with the class of boat and eurovan with the former being half the height. When I make eurovan's picture's width: 65% and boat's width: 35% it changes the height and boat isn't half the height of eurovan like it is originally.

Upvotes: 1

Views: 385

Answers (4)

Lucas Vazquez
Lucas Vazquez

Reputation: 1872

---------

EDIT: I think my answer is ok, but this https://stackoverflow.com/a/56487541/10712525 (@showdev answer) is perfectly.

---------

Look the result

I've added new "main" element to center all in the middle, and I separate right and left contents with divs. I change some things in the styles, added new lines and removed others, all are commented. I hope it can help you.

Here the code:

<html>
    <head>
        <style>
            .button {
                background-color: #16D6D1;
                padding: .9rem 2rem;
                border-radius: 6px;
                display: inline-block; /* New line */
            }

            a {
                text-decoration: none;
                text-transform: uppercase;
                color: inherit;
                size: 1.9rem;
                font-weight: 700;
            }

            .eurovan {
                width: 100%; /* 100% width, keep it, dont delete or change for "auto" or 35% */
            }

            .boat {
                width: 100%; /* 100% width, keep it, dont delete or change for "auto" or 65% */
                /* delete float: right, dont need it*/
            }

            .feature {
                width: 65%;
                /* delete background-color: #F6F8FA, dont need it */
                /* delete float: right, dont need it */

                text-align: center; /* New line */
                margin: auto; /* New line */
                padding: 50px; /* New line */
            }

            /* add content to this class */
            .left {
                display: inline-block;
                position: absolute;
                width: 65%;
                margin: 20px;
            }

            /* add content to this class */
            .right {
                display: inline-block;
                width: 35%;
                margin: 20px;
            }

            /* add content to this class */
            .clearfix {
                position: relative;
            }

            /* New class, only for center the content in the middle */
            .main {
                max-width: 70%; 
                margin: 0 auto;
            }
        </style>
    </head>
    <body>

        <!-- New main div -->
        <main class="main">

            <section class="clearfix">

                <!-- separate right left content in divs -->
                <div class="right">
                    <img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
                </div>
                <div class="left">
                    <img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
                    <div class="feature">
                        <h3>Feature</h3>
                        <h2>lorem ipsum dolor sit amet, consectetur</h2>
                        <a href="#" class="button">Read More</a>
                    </div>
                </div>

            </section>
        </main>
    </body>
</html>

To consider:

The padding/margin attributes that I've added in feature, left and right class are only to keep the elements further apart. It's not necessary for your purpose, but the idea of stylize is to make all beautifull, and keep the items separated from each other makes everything look better. Same for main div, you can delete it if you want, or change the width from 70% to 80% or 50%.

Upvotes: 1

showdev
showdev

Reputation: 29168

Unless you scale the widths of the two images proportionally, then their heights won't scale proportionally either. However, you can calculate the appropriate percentages:

The total width of the two native images is:

501px + 1050px = 1551px

To add a 3% gap between the images, calculate 3% of the total width:

1551px * 3% = 46.53px

Add that value to the total width:

1551px + 46.53px = 1597.53px

Calculate each image's percentage of that total width:

501px / 1597.53px= ~31.36%
1050px / 1597.53px= ~65.73%

The images will scale proportionately to each other if you use those percentages.

body {
  margin: 0;
}

.eurovan {
  width: 31.36%;
  float: left;
}

.boat {
  width: 65.73%;
  float: right;
}

.feature {
  width: 65.73%;
  background-color: #F6F8FA;
  float: right;
  padding: 1.5em;
  /* margin: 3% 0 0; */
  box-sizing: border-box;
  font-size: 10px;
  font-family: sans-serif;
  text-align: center;
}

.feature h3 {
  margin: 0 0 1em;
  font-size: 1.2em;
}

.feature h2 {
  font-size: 1.3em;
  margin: 0 0 1.2em;
}

.button {
  background-color: #16D6D1;
  padding: 0.9em 2em;
  border-radius: .5em;
  display: inline-block;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
}
<section class="clearfix">
  <img class="eurovan" src="https://picsum.photos/id/236/501/850" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
  <img class="boat" src="https://picsum.photos/id/238/1050/425" alt="An overhead shot of a boat coming into shore from the ocean">
  <div class="feature">
    <h3>Feature</h3>
    <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
    <a href="#" class="button">Read More</a>
  </div>
</section>

Your mockup doesn't include any space between the second image and the feature element. But if you wanted one, you could add a 3% margin-top to the feature element to achieve a vertical gap the same size as the gap between images. This is based on the fact that percentage margin is calculated from the width of the containing block.

This same stragegy can be used for other layouts like flexbox or grid. This might make it easier to have the bottom of the feature line up with the bottom of the first image (depending on the amount of feature content).

Here's a demonstration:

body {
  margin: 0;
}

section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#col1 {
  flex: 0 0 31.36%;
}

#col2 {
  flex: 0 0 65.73%;
  display: flex;
  flex-direction: column;
}

img {
  display: block;
  width: 100%;
}

.feature {
  flex: 1 0 auto;
  background-color: #F6F8FA;
  padding: 1.5em;
  /*margin-top: 4.56%;*/
  /* this is (3% / 65.73%) */
  box-sizing: border-box;
  font-size: 10px;
  font-family: sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  text-align:center;
}

.feature h3 {
  margin: 0;
  font-size: 1.2em;
}

.feature h2 {
  margin:0;
  font-size: 1.3em;
}

.button {
  background-color: #16D6D1;
  padding: 0.9em 2em;
  border-radius: .5em;
  display: inline-block;
  font-weight:bold;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
}
<section>
  <div id="col1">
    <img src="https://picsum.photos/id/236/501/850" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
  </div>
  <div id="col2">
    <img src="https://picsum.photos/id/238/1050/425" alt="An overhead shot of a boat coming into shore from the ocean">
    <div class="feature">
      <h3>Feature</h3>
      <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt.</h2>
      <a href="#" class="button">Read More</a>
    </div>
  </div>
</section>

Upvotes: 1

Dylan Moguilevsky
Dylan Moguilevsky

Reputation: 557

With this code you can get what you are looking for, I made a feature container and use background-images instead of imgs for more css control

<section class="clearfix">
    <div class="eurovan"></div>
    <div class="feature-container">
        <div class="boat"></div>
        <div class="feature">
            <h3>Feature</h3>
            <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
            <a href="#" class="button">Read More</a>
        </div>
    </div>
</section>

And this CSS

* {
    margin: 0;
    border: 0;
    padding: 0;
}

.button {
    background-color: #16D6D1;
    padding: .9rem 2rem;
    border-radius: 6px;
}

a {
    text-decoration: none;
    text-transform: uppercase;
    color: inherit;
    size: 1.9rem;
    font-weight: 700;
}

.eurovan {
    width: 33%;
    margin-right: 2%;
    height: 850px;
    float: left;
    background-image: url('../images/eurovan.jpg');
    background-size: cover;
    display: block;
}

.feature-container {
    width: 65%;
    float: left;
    height: 850px;
}

.boat {
    width: 100%;
    height: 50%;
    background-image: url('../images/boat.jpg');
    background-size: cover;
    display: block;
}

.feature {
    width: 100%;
    height: 50%;
    text-align: center;
    background-color: lightgrey;
}

Upvotes: 1

Limitless Claver
Limitless Claver

Reputation: 497

I recommend wrapping the two elements you want to affect in your case images with a parent div.

<div class="parent_div">
<img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
<img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
</div>

now you should use either flexbox or the CSS grid system since it is recommended in place of floats. I would recommend the grid in this case.

.parent_div{
 display: grid;
 grid-template-columns: 1fr 1fr;
}

You can check the grid documentation to see the other options you have.

Upvotes: 1

Related Questions