Question 259176 in Html Question posted in
Some basic documentation can be found here.

Html – Why won't my flex items align side-by-side?

Why won’t my .summary and img items align next to each other? I have a div section with class="resume-container" containing three items. The first item "contact-info" should stretch the whole width of the screen, the second and 3rd items, summary and img, should be set side-by-side under the first item each taking up half the available screen space. I chose to use flex to make the site adaptable to differing screen sizes. Is there a better way to do this?

.resume-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5%;
}

.contact-info {
  background-color: #206977ad;
  text-align: center;
  border-radius: .4rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  margin-bottom: .8%;
  align-self: center;
  flex-grow: 2;
  align-self: stretch;
  min-width: 95%;
}

.summary {
  max-width: 45%;
  background-color: #a1cd6c91;
  padding-right: .7em;
  padding-left: .7em;
  border-radius: 2rem;
  flex-grow: 1;
}

.summary p {
  font-size: 1.5rem;
  line-height: 1.25em;
  text-align: center;
}

.img-container img {
  max-width: 45%;
  margin-left: 0.8%;
  border-radius: 2rem;
}
<div class="resume-container">
  <div class="contact-info">
    ...
  </div>
  <div class="summary">
    ...
  </div>
  <div class="img-container">
    <img src="https://via.placeholder.com/100" alt="Picture not Found">
  </div>

Output
enter image description here

I want the summary section and img to appear inline with each other. Why doesn’t this happen?

Tags:

3

Answers


  1. 0

    Add flex-shrink: 1; to both containers that should be next to each other to allow them to shrink if necessary.

    Login or Signup to reply.
  2. 0

    The snippet shows them literally next to each other (given the viewport size).

    On a big screen, the summary is next to contact because contact is only 95% wide. This is because of the max-width: 95%. summary has no real width declared thats why it slips up. Its (non existing) content fits in there. Declaring only a max-width on summary and img-container doesn’t set a real width, it just tells "not further than this".

    Give proper widths to your containers.

    Regarding the width: when you have 50/50 and add margins, apply them evenly to the inner sides, to make it truly centered. You then also have to subtract the width of the margin from the width of the containers, otherwise they will be bigger than 50%.

    I suggest for mobile screens to change add a media query where the direction of the flex is set to column (standard is row) and make the containers 100% width.

    See all in snippet below:

    .resume-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5%;
}

.contact-info {
  background-color: #206977ad;
  text-align: center;
  border-radius: .4rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  margin-bottom: .8%;
  
  /* new */
  width: 100%;
}

/* new */
.summary,
.img-container {
  width: calc(50% - 0.4%);
  box-sizing: border-box;
}

.summary {
  background-color: #a1cd6c91;
  padding-right: .7em;
  padding-left: .7em;
  border-radius: 2rem;
  
  /* new */
  margin-right: 0.4%;
}

.summary p {
  font-size: 1em;
  font-family: sans-serif;
  line-height: 1.25em;
  text-align: center;
}

.img-container {
  border-radius: 2rem;
  
  /* new */
  margin-left: 0.4%;
  overflow: hidden;
}

/* new */
.img-container img {
  max-width: 100%;
}

/* new */
@media screen and (max-width: 480px) {
  .resume-container {
    flex-direction: column;
  }
  
  .summary,
  .img-container {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
}
    <div class="resume-container">
  <div class="contact-info">
    ...
  </div>
  <div class="summary">
    <p>Damage report? Sections 27, 28 and 29 on decks four, five and six destroyed. Without our shields, at this range it is probable a photon detonation could destroy the Enterprise.</p>
  </div>
  <div class="img-container">
    <img src="https://www.buzzfeed.de/bilder/2017/09/18/90143589/24703335-buzzfeed-de.png" alt="Make it so">
  </div>
    Login or Signup to reply.
  3. 0

    It’s possible that the .summary and img elements are not aligning side by side due to some styling properties in your code. In the code you provided, I don’t see that you’ve defined an .img-container class. Instead, you should apply the class to the container element surrounding the image, as shown in the corrected code below:

    <div class="resume-container">
  <div class="contact-info">
    <!-- Contact Information -->
  </div>
  <div class="summary">
    <!-- Summary -->
  </div>
  <div class="img-container">
    <img src="https://via.placeholder.com/100" alt="Picture not Found">
  </div>
</div>

    Furthermore, in your CSS, you’re applying the style max-width: 45% to both the .summary class and the image within .img-container. This causes both elements to have a maximum width of 45%, which could be preventing them from aligning side by side correctly.

    A better way to achieve the desired layout is to apply a fixed or relative width to each of the .summary and .img-container elements and then use flex-grow to control how the available space is distributed. Here’s a corrected version of the CSS:

    .resume-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5%;
}

.contact-info {
  background-color: #206977ad;
  text-align: center;
  border-radius: .4rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  margin-bottom: .8%;
  align-self: center;
  flex-grow: 2;
  align-self: stretch;
  min-width: 95%;
}

.summary {
  flex-grow: 1;
  width: 45%; /* Set a fixed or relative width */
  background-color: #a1cd6c91;
  padding-right: .7em;
  padding-left: .7em;
  border-radius: 2rem;
}

.summary p {
  font-size: 1.5rem;
  line-height: 1.25em;
  text-align: center;
}

.img-container {
  flex-grow: 1;
  width: 45%; /* Set a fixed or relative width */
  margin-left: 0.8%;
  border-radius: 2rem;
}

.img-container img {
  max-width: 100%; /* Adjust the image to the container's width */
  height: auto; /* Maintain the image's aspect ratio */
}

    I hope this information is very useful to you 🙂 Greetings from the Exsis Digital community!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search