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

Html – Floating objects help in CSS

I hope someone can help me. I am having trouble getting the .car objects to float. I have 6 .car objects, and I want to place them in 2 rows with 3 objects per row. When I do manage to get the objects to float, they end up being compressed on the LHS. Here is the code:

#cars {
  margin-bottom: 1rem;
  width: 100%;
}

.container-wrapper {
  display: inline-block;
  float: left;
  width: 300px;
}

.car img {
  width: 100%;
  height: auto;
}

.car {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.car:hover {
  transform: scale(1.05);
}

.car p {
  text-align: center;
  font-size: 18px;
  margin-top: 1rem;
}

.car-description {
  font-size: 14px;
  margin-top: 0.5rem;
  color: #777;
}

#cars a {
  text-decoration: none;
}
<section id="cars">
  <div class="container">
    <div class="container-wrapper">
      <div class="car">
        <a href="compact_car.html">
          <img alt="compact car" src="compact-car.jpg">
        </a>
        <p>Compact Car</p>
        <p class="car-description">Great for city driving and easy parking. Fuel-efficient and affordable.</p>
      </div>

    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="sedan_car.html">
          <img alt="sedan car" src="sedan-car.jpg">
        </a>
        <p>Sedan Car</p>
        <p class="car-description">Spacious and comfortable, perfect for families or long road trips.</p>
      </div>
    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="suv_car.html">
          <img alt="suv car" src="suv-car.jpg">
        </a>
        <p>SUV Car</p>
        <p class="car-description">Rugged and versatile, ideal for off-road adventures and outdoor activities.</p>
      </div>
    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="sports_car.html">
          <img alt="sports car" src="sports-car.jpg">
        </a>
        <p>Sports Car</p>
      </div>
    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="luxury_car.html">
          <img alt="luxury car" src="luxury-car.jpg">
        </a>
        <p>Luxury Car</p>
      </div>
    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="electric_car.html">
          <img alt="electric car" src="electric-car.jpg">
        </a>
        <p>Electric Car</p>
      </div>
    </div>
  </div>
</section>

I tried using float, display: inline-block, flex. I have even placed each object within a tag (as shown in the code).

I cannot seem to get it to work!

Tags:

2

Answers


  1. 0

    The easiest thing to do if you want a 3 column layout is to use grid, particularly the grid-template-rows property. CSS tricks has a good article on grid and there’s a decent explainer video by Kevin Powell on youtube to get you started. No one really uses floats anymore for layout.

    Marked up code below:

    /* added this */
.container {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  
  /* some layout tweaks below */
  width: fit-content; /* make the width of the container the same as the content so we can... */
  margin-inline: auto; /* ...put the block in the centre of the viewport. */
  
  gap: 0.25rem; /* optional: if we want to add a bit of space between each container-wrapper div, we add a gap */
}

#cars {
  margin-bottom: 1rem;
  width: 100%;
}

.container-wrapper {
  /*display: inline-block;*/
  /*float: left;*/
  width: 300px;
}

.car img {
  width: 100%;
  height: auto;
}

.car {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.car:hover {
  transform: scale(1.05);
}

.car p {
  text-align: center;
  font-size: 18px;
  margin-top: 1rem;
}

.car-description {
  font-size: 14px;
  margin-top: 0.5rem;
  color: #777;
}

#cars a {
  text-decoration: none;
}
    <section id="cars">
  <div class="container">
    <div class="container-wrapper">
      <div class="car">
        <a href="compact_car.html">
          <img alt="compact car" src="compact-car.jpg">
        </a>
        <p>Compact Car</p>
        <p class="car-description">Great for city driving and easy parking. Fuel-efficient and affordable.</p>
      </div>

    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="sedan_car.html">
          <img alt="sedan car" src="sedan-car.jpg">
        </a>
        <p>Sedan Car</p>
        <p class="car-description">Spacious and comfortable, perfect for families or long road trips.</p>
      </div>
    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="suv_car.html">
          <img alt="suv car" src="suv-car.jpg">
        </a>
        <p>SUV Car</p>
        <p class="car-description">Rugged and versatile, ideal for off-road adventures and outdoor activities.</p>
      </div>
    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="sports_car.html">
          <img alt="sports car" src="sports-car.jpg">
        </a>
        <p>Sports Car</p>
      </div>
    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="luxury_car.html">
          <img alt="luxury car" src="luxury-car.jpg">
        </a>
        <p>Luxury Car</p>
      </div>
    </div>
    <div class="container-wrapper">
      <div class="car">
        <a href="electric_car.html">
          <img alt="electric car" src="electric-car.jpg">
        </a>
        <p>Electric Car</p>
      </div>
    </div>
  </div>
</section>
    Login or Signup to reply.
  2. 0

    change the .container-wrapper width to 33% it will work fine.

     .container-wrapper {
    display: inline-block;
    float: left;
    width: 33%;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search