How to make flexbox and DIV work for a car sales template in HTML with sidebar and without sidebar? [migrated]

I've created a HTML template, and it generally works for what I need it to be (a used vehicle sales platform); this uses flexbox.

I have three different templates, one stand-alone design and two which are similar versions of the same codebase:

body {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  line-height: 18px;
}

header {
  margin-left: 20px;
  height: auto;
  width: 600px;
  padding: 40px;
  color: white;
  background-color: black;
  margin-bottom: 12px;
}

.sidebar {
  background-color: yellow;
  float: left;
  width: 100px;
  height: 400px;
}

.content {
  margin-left: 80px;
}

article.at1 {
  border: 3px solid;
  width: 800px;
}

.at1 {
  margin-bottom: 20px;
}

.container {
  display: grid;
  grid-template-columns: 700px 30px;
  grid-gap: -1rem;
  background-color: blue;
  color: white;
  margin-bottom: 10px;
}

.container2 {
  display: grid;
  grid-template-columns: 300px 300px;
  grid-gap: 3rem;
}

.container2>div:nth-child(1) {
  width: 90px;
  margin-left: 30px;
}

.container2>div:nth-child(2) {
  margin-right: 70px;
  width: 460px;
}

.container2>div img {
  display: inline-block;
  width: 300px;
  margin-right: 30px;
}

.container:nth-child(2) {
  float: right;
  width: 60%;
}

.container2:nth-child(2) {
  width: auto;
}

.price {
  width: 50px;
}

<body>
  <header>
    <H1>USED CARS OF LEEDS</H1>
    <h2>North Street, Leeds LS2</h2>
  </header>
  <div class="sidebar">
    Menu
  </div>
  <div class="content">
    <article class="at1">
      <div class="container">
        <div>
          2008 58 FORD MONDEO 2.3 ZETEC 5dr
        </div>
        <div class="price">
          £6,995
        </div>
      </div>
      <div class="container2">
        <div><img src="https://d1ix0byejyn2u7.cloudfront.net/drive/images/made/drive/images/remote/https_ssl.caranddriving.com/f2/images/used/big/fordmondeo%202007-10_750_500_70.jpg"></div>
        <div>
          Silver, this example is in good condtion for its age!
        </div>
      </div>
    </article>
        <article class="at1">
    <div class="container">
        <div>
          2003 53 LAND ROVER FREELANDER 1.8i 5dr
        </div>
        <div class="price">
          £6,995
        </div>
      </div>
      <div class="container2">
        <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/2002-2003_Land_Rover_Freelander.jpg/1280px-2002-2003_Land_Rover_Freelander.jpg"></div>
        <div>
          blue, good condition
        </div>
      </div>
    </article>
    <article class="at1">
      <div class="container">
        <div>
          1989 G FORD IVECOCARGO EUROCARGO DROPSIDE PICKUP 4.3 TURBODIESEL 2dr 6.4t
        </div>
        <div class="price">
          £2,995
        </div>
      </div>
      <div class="container2">
        <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/1999_Iveco-Ford_Cargo_75E15_5.9.jpg/1024px-1999_Iveco-Ford_Cargo_75E15_5.9.jpg"></div>
        <div>
          white, 100,000 km
        </div>
      </div>
    </article>
  </div>
</body>

</html>

The code for that works OK, but I'm making it more esthetically pleasing by adding webfonts.

However, where the main issues are relate to two things - getting the sidebar to work properly and have enough space and ensuring there's space between sidebar and the contents of div.content.

This is my second template I designed, which uses flexbox as well, but in a slightly different way (the colors aren't going to be that in the production version).

The code works as intended (flexbox displays), but the two major issues are getting everything to fit properly.

Version 1 (three-column flex within article tag):

html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: purple;
        height: auto;
        padding: 20px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 0px;
        background: #FFFFFF;
      }

      /* Add your flexbox CSS below here */

      section {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
      }

      article {
      width: 700px;
      }
      
      article.imagebox img {
      width: 230px;
      }
      
      article.price {
      text-align: right;
      float: right;
      }
      
      .infog > article {
      background-color: #FFFFFF;
      }

.sidebar {
width: 200px;
height: 600px;
padding: 20px;
background-color: yellow;
float: left;
margin-right: 30px;
}
div.content {
margin-right: 300px;
height: 600px;
width: 800px;
padding: 20px;
margin-left: 20px;
}

<body>
    <header>
      <h1>Leeds Used Cars</h1>
      <h2>Northgate Street, Leeds</h2>
    </header>
<div class="sidebar">
Content coming
</div>
<div class="content">
    <section>
      <article class="imagebox">
        <img src="https://parkers-images.bauersecure.com/gallery-image/pagefiles/265121/1752x1168/02-mercedes-sprinter-13.jpg">
      </article>

      <article>
        <h3>2014 64 Mercedes-Benz Sprinter 313CDI High Roof Panel Van</h3>

        <p>Silver, 70,000 miles
      </article>

      <article>
        <h3>£19,000</h3>
      </article>
    </section>
    
   
    <section>
      <article class="imagebox">
        <img src="https://parkers-images.bauersecure.com/gallery-image/pagefiles/201064/static-exterior/1752x1168/astra_3.jpg">
      </article>

      <article>
        <h3>2007 57 Vauxhall Astra 1.8 VVT Life 5dr</h3>

        <p>Silver, 170,000 miles
      </article>

      <article>
        <h3>£1,300</h3>
      </article>
    </section>
    
    </div>
    </body>

I also have an alternate version of this template where the product description is above the article tag:

html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: purple;
        height: auto;
        padding: 20px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 0px;
        background: aqua;
      }

      /* Add your flexbox CSS below here */

      section {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
      }

      article {
      width: 700px;
      }
      
      article.imagebox img {
      height: 260px;
      }
      
      article.price {
      text-align: right;
      float: right;
      }
      
      .infog > article {
      background-color: #FFFFFF;
      }

.sidebar {
width: 200px;
height: 600px;
padding: 20px;
background-color: yellow;
float: left;
margin-right: 30px;
}
div.content {
margin-right: 300px;
height: 600px;
width: 800px;
padding: 20px;
margin-left: 20px;
}

 <body>
    <header>
      <h1>Leeds Car Centre</h1>
      <h2>Northgate Street, Leeds</h2>
    </header>
<div class="sidebar">
owl
</div>
<div class="content">
   
        <section> 
      <article>
        <h2>2021 Compass Camino 660 </h2>
      </article>    
      <article class="price">
        <h2>£23,000</h2>
      </article>
    </section>
            <section class="infog"> 
      <article class="imagebox">
        <img src="https://wgp-cdn.co.uk/OAL/jpg/Camino-660-F_25cms-47523/500/500/">
      </article>   
      <article>
      4 berth, twin axle caravan, new
      </article>
    </section>
    
    
            <section> 
      <article>
        <h2>1989 G Porsche 911 </h2>
      </article>    
      <article class="price">
        <h2>£23,000</h2>
      </article>
    </section>
            <section class="infog"> 
      <article class="imagebox">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Porsche_911_%28964%29_Turbo_%2810317085456%29.jpg/1024px-Porsche_911_%28964%29_Turbo_%2810317085456%29.jpg">
      </article>   
      <article>
      black, good condition, a classic
      </article>
    </section>
  </body>

With these three, I want to make four major changes:

  • Make them look more professional

    Ensure there's enough space between the sidebar

    Make sure the flexboxes work properly

    Have a version without sidebar

These are the four most important things.

I am looking for constructive criticism of these basic templates on how to improve them and make them more professional before any public release.

Any constructive criticism or code improvements are welcomed.

What I am looking to do is make the user interface one that is user-friendly; this is a sandbox test version in HTML before it's ready for prime time.

Tags: , , , , , ,