Columns in preview card are not aligned horizontally using HTML/CSS

Question

I am trying to create a 3-column preview card. I cannot get the 3 column to be horizontally aligned. This is a project from Front-end Mentor.

I am new to this I don't know if I wrote this correctly.

This is what it looks like:

Two cards are horizontal (on one row) but the last one is on the second row. I want everything in one row.

In CSS, I have tried to comment out certain parts to see if it will fix the issue but when I fix one, I mess up another. I just want the columns to be aligned horizontally right now.

* {
  --bright-orange: hsl(31, 77%, 52%);
  --dark-cyan: hsl(184, 100%, 22%);
  --very-dark-cyan: hsl(179, 100%, 13%);
  --transparent-white: hsla(0, 0%, 100%, 0.75);
  --very-light-gray: hsl(0, 0%, 95%);
}

body {
  font-size: 15px;
  font-weight: 400;
  background-color: var(--very-light-gray);
  font-family: 'Lexend Deca', sans serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  font-size: 15px;
}

h1 {
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Big Shoulders Display', cursive;
  color: var(--very-light-gray);
}

#car-container {
  max-width: 960px;
  width: 550px;
  height: 40px;
  margin: 0 auto;
  display: grid;
  padding: 20px;
}

.wrapper {
  display: grid;
  min-height: 12vh;
  border-radius: 12px;
  margin: 2rem;
  display: inline-block;
}

.cars {
  float: left;
  width: 33.33%;
  height: 340px;
  color: var(--transparent-white);
  padding: 40px;
}

@media (max-width: 992px) {
  #car-options {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: 900;
  }
}

#sedans {
  background-color: var(--bright-orange);
  border-radius: 8px 0 0 4px;
}

#suvs {
  background-color: var(--dark-cyan);
}

#luxury {
  background-color: var(--very-dark-cyan);
  border-radius: 0 8px 8px 0;
}

#sedan-btn {
  background-color: var(--very-light-gray);
  color: var(--bright-orange);
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

button {
  cursor: pointer;
}

#suv-btn {
  background-color: var(--very-light-gray);
  color: var(--dark-cyan);
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

#luxury-btn {
  background-color: var(--very-light-gray);
  color: var(--very-dark-cyan);
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

<section class="car-container">
  <div class="wrapper">
    <div class="cars" id="sedans">
      <img src="images/icon-sedans.svg" alt="sedan icon">
      <h1>Sedans</h1>
      <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
      <button id="sedan-btn">Learn More</button>
    </div>
    <div class="cars" id="suvs">
      <img src="images/icon-suvs.svg" alt="SUV icon">
      <h1>SUVs</h1>
      <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
        <button id="suv-btn">Learn more</button></p>
    </div>
    <div class="cars" id="luxury">
      <img src="images/icon-luxury.svg" alt="luxury car icon">
      <h1>Luxury</h1>
      <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
        <button id="luxury-btn">Learn more</button></p>
    </div>
  </div>
</section>
<footer class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="http://www.iamkianna.com" target="_blank">Kianna Hendricks</a>.
</footer>

This doesn't solve your problem, but you can avoid using `float` by looking into Flexbox or Grid: https://stackoverflow.com/questions/9776840/is-float-for-layout-bad-what-should-be-used-in-its-place — disinfor, Jan 18 '22 at 02:10
You have `display: grid` in your CSS, but you override that - in the same rule-set - with `display: inline-block`; what exactly are you trying to achieve? — David Thomas, Jan 18 '22 at 02:28

score 1 · Answer 1 · answered Jan 18 '22 at 03:12

One approach, based on my interpretation of your desired result, is as below; my interpretation is that you want the <footer> towards the bottom of the page, with the content towards the top.

There should be a three column layout of the various car types, allowing for some wrapping when the device requires it to keep content on screen as far as possible.

/* all CSS custom properties defined here: */
:root {
  --bright-orange: hsl(31, 77%, 52%);
  --dark-cyan: hsl(184, 100%, 22%);
  --very-dark-cyan: hsl(179, 100%, 13%);
  --transparent-white: hsla(0, 0%, 100%, 0.75);
  --very-light-gray: hsl(0, 0%, 95%);
}

/* simple CSS reset: */
*, ::before, ::after {
  box-sizing: border-box;
  /* defining the font you specified, using the font shorthand
     notation: font-weight (400), font-size (15px), line-height
     (omitted in your code, but set to 1.5), and font-family
     (Lexend Deca or sans-serif): */
  font: 400 15px / 1.5 'Lexend Deca', sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--very-light-gray);
  min-height: 100vh;
  display: flex;
  /* to ensure a vertical layout: */
  flex-direction: column;
  align-items: center;
  /* to spread the content across the
     flex-axis (the vertical), first element
     at the top of the page, the last element
     at the foot, and any other siblings spread
     across that axis with even spacing between: */
  justify-content: space-between;
}

h1 {
  text-transform: uppercase;
  font-family: 'Big Shoulders Display', cursive;
  color: var(--very-light-gray);
}

/* I don't know why this is display: grid,
   but I didn't change it from your posted
   code; so change as you like: */
#car-container {
  width: minmax(550px, 960px);
  margin: 0 auto;
  display: grid;
  padding: 20px;
}

.wrapper {
  display: flex;
  /* allowing child flex-items to wrap to
     new lines if necessary: */
  flex-wrap: wrap;
  /* rather than using margins between the
     child elements we use the gap property
     to define a 1em space between adjacent
     rows and cells: */
  gap: 1em;
  justify-content: space-between;
  min-height: 12vh;
  /* defining the border-radius on the parent
     in order that the radius looks consistent
     regardless of layout changes due to screen/
     device width: */
  border-radius: 12px;
  margin: 2rem;
  /* in order that the content is clipped to the
     rounded corners: */
  overflow: hidden;
}

/* all shared properties moved into the rule-set
   of the shared class-name of all children: */
.cars {
  color: var(--transparent-white);
  padding: 40px;
  /* to allow the child elements to grow to occupy
     space as needed, to avoid large gaps being
     created: */
  flex-grow: 1;
  /* 100% of the width divided by the three child
     elements, with 2em subtracted to reflect the
     two 1em gaps between the contents: */
  flex-basis: calc((100% / 3) - 2em);
}

#sedans {
  background-color: var(--bright-orange);
}

#suvs {
  background-color: var(--dark-cyan);
}

#luxury {
  background-color: var(--very-dark-cyan);
}

/* again, all shared properties brought into
   the shared rule-set, in order to reduce
   repetition: */
button {
  background-color: var(--very-light-gray);
  cursor: pointer;
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

#sedan-btn {
  color: var(--bright-orange);
}

#suv-btn {
  color: var(--dark-cyan);
}

#luxury-btn {
  color: var(--very-dark-cyan);
}

<section class="car-container">
  <div class="wrapper">
    <div class="cars" id="sedans">
      <img src="images/icon-sedans.svg" alt="sedan icon">
      <h1>Sedans</h1>
      <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
      <button id="sedan-btn">Learn More</button>
    </div>
    <div class="cars" id="suvs">
      <img src="images/icon-suvs.svg" alt="SUV icon">
      <h1>SUVs</h1>
      <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
        <button id="suv-btn">Learn more</button></p>
    </div>
    <div class="cars" id="luxury">
      <img src="images/icon-luxury.svg" alt="luxury car icon">
      <h1>Luxury</h1>
      <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
        <button id="luxury-btn">Learn more</button></p>
    </div>
  </div>
</section>
<footer class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="http://www.iamkianna.com" target="_blank">Kianna Hendricks</a>.
</footer>

JS Fiddle demo.

References:

Bibliography:

"A Complete Guide to Grid," CSS-Tricks.
"CSS Grid Layout," MDN.
"A Complete Guide to Flexbox," CSS-Tricks.
"Basic concepts of flexbox," MDN.

score 0 · Answer 2 · answered Jan 18 '22 at 02:22

0

The padding value on top of your 33.33% width is preventing them to line up in one row. You could substract the left and right padding from the width like this width: calc(33.33% - 80px)

answered Jan 18 '22 at 02:22

pso

513
1
16

Columns in preview card are not aligned horizontally using HTML/CSS

2 Answers2