How to align text in LI properly and images within DIVs in layout?

user_847047 0
Viewed 139

This is my code for an auto showroom that's in development: https://jsfiddle.net/zoh03cdv/

I have two problems.

First problem is getting images and text next to each other despite the fact I set contentbox1 to 2 columns:

* {
width: 890px;
}

a {
text-decoration: none;
}

header{
  margin: 0; padding: 2em 5em 4em; color: #efefef;
  overflow:hidden;
  position: relative;
}

header::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height: 100%;
  width:100%;
  transform: skewY(-3deg);
  background: red;
  transform-origin: bottom left;
  z-index: -1;
}
div.content {
font-family: sans-serif;
font-size: 16px;
width: 460px;
}
ul.vehicleinfo {
display: flex;
flex: 1 0 15%;
flex-grow: 3;
flex-wrap: wrap;
flex-basis: 100%;
width: 800px;
margin-left: 16px;
list-style: none;
margin: 3px;
justify-content: space-between;
}
ul.vehicleinfo li { 
font-family: sans-serif;
font-size: 88%;
color: #333;
background-color: yellow;
margin-bottom: 10px;
width: 400px;
margin-right: 40px;
margin: 0 0 40px 0; 
justify-content: flex-end;
}
ul.vehicleinfo li * {
display: block;
}
ul.vehicleinfo li h3 {
font-size: 1.2em;
}
div.autocontent {
width: 760px;
margin-left: 70px;
}
.price {
width: 550px;
text-align: center;
}
.contentbox1 {
column-span: 2;
}
.autoimg img {
width: 340px;
}
.descript1 {
font-size: 14px;
float: left;
}
<div class="autocontent">
<ul class="vehicleinfo">
<li><h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS WITH EVERY EXTRA</h3></li>
<li><h3 class="price">£36,500</h3></li>
</ul>
<div class="contentbox1">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
<div class="descript1">gold, 24,000 miles</div>
</div>
</div>

The text gets cut off and doesn't go on to another line as I expected: https://i.stack.imgur.com/tQMGN.jpg

I'm trying to get things evenly aligned having done this as a DIV and LI within DIVs.

Any help is appreciated to get this code looking more esthetically pleasing, it's working partially but the div part isn't the easiest, at least for anything contained within the class autocontent.

My problem is getting the columns to work properly.

css html
3 Answers

For more proper UI layout and UX.

Try to update your HTML and CSS with following code

a {
  text-decoration: none;
}

header {
  margin: 0;
  padding: 2em 5em 4em;
  color: #efefef;
  overflow: hidden;
  position: relative;
}

header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: skewY(-3deg);
  background: red;
  transform-origin: bottom left;
  z-index: -1;
}

div.content {
  font-family: sans-serif;
  font-size: 16px;
  width: 460px;
}

ul.vehicleinfo {
  display: block;
  list-style: none;
  padding: 0 10px;
}

ul.vehicleinfo li {
  font-family: sans-serif;
  font-size: 88%;
  color: #333;
  margin: 0;
  padding: 5px 0;
  border-radius: 10px;
}

ul.vehicleinfo li * {
  display: block;
}

ul.vehicleinfo li h3 {
  font-size: 1.2em;
  font-weight: 700;
}

div.autocontent {
  width: 760px;
  margin-left: 70px;
  display: flex;
  background: #f3f3f3;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  margin-bottom: 10px;
}

.price {
  font-weight: 700;
}

.contentbox1 {
  column-span: 2;
}

.autoimg img {
  width: 340px;
  border-radius: 8px;
}

.descript1 {
  font-size: 14px;
  float: left;
}
<header>
  <h1>VAN CENTRE</h1>
  <h2>1 Anytown Road, Birmingham</h2>
  <h3>0121 496 0000</h3>
</header>
<div class="content">
  <div class="autocontent">
    <div class="contentbox1">
      <div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg"></div>

    </div>
    <ul class="vehicleinfo">
      <li>
        <h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
      </li>
      <li>
        <h3 class="price">£22,500</h3>
      </li>
      <div class="descript1">white, 20,000 miles</div>
    </ul>

  </div>
  <div class="autocontent">
    <div class="contentbox1">
      <div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>

    </div>
    <ul class="vehicleinfo">
      <li>
        <h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
      </li>
      <li>
        <h3 class="price">£36,500</h3>
      </li>
      <div class="descript1">gold, 24,000 miles</div>
    </ul>

  </div>

Enjoy!

user_163317150

enter image description here

First, there are many things that can be improved in your code and I'll try to explain a bit but I won't change you code too much so you can understand:

  1. with * you target all the elements so putting a width: 890px it's not a good default, if you want to hard reset the browser default. This is the reason your text gets cut off, you can try:

* {
  margin: 0;
  padding: 0;
}

  1. use the .content div better, you can style it to align all your autocontent, so a small width doesn't do anything good if his children are larger. To get the content aligned with the header text, we can use the same padding or at least the padding-left:

div.content {
  width: 800px;
  padding: 2em 5em 4em;
}

  1. use display: flex to align the elements BUT don't overuse it. Too many properties will make your code too complex, if you need some examples just check this reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  2. SIMPLIFY the code as much as you can, it will be easier to understand and debug.

Take a look in the FINAL example:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  color: #333;
}

a {
  text-decoration: none;
}

header {
  margin: 0;
  padding: 2em 5em 4em;
  color: #efefef;
  overflow: hidden;
  position: relative;
}

header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: skewY(-3deg);
  background: red;
  transform-origin: bottom left;
  z-index: -1;
}
div.content {
  width: 800px;
  padding: 2em 5em 4em;
}

.autocontent {
  border-top: 1px solid #ddd;
  padding: 0 1rem;
  margin-bottom: 1rem;
}

ul.vehicleinfo {
  display: flex;
  justify-content: space-between;
  list-style: none;
}
ul.vehicleinfo li {
  padding: 1rem 0;
}
.price {
  text-align: right;
}
.contentbox {
  display: flex;
  gap: 1rem;
}
.autoimg img {
  width: 320px;
}
<header>
  <h1>VAN CENTRE</h1>
  <h2>1 Anytown Road, Birmingham</h2>
  <h3>0121 496 0000</h3>
</header>
<div class="content">
  <div class="autocontent">
    <ul class="vehicleinfo">
      <li>
        <h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
      </li>
      <li>
        <h3 class="price">£22,500</h3>
      </li>
    </ul>
    <div class="contentbox">
      <div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg"></div>
      <div class="description">white, 20,000 miles</div>
    </div>
  </div>
  <div class="autocontent">
    <ul class="vehicleinfo">
      <li>
        <h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
      </li>
      <li>
        <h3 class="price">£36,500</h3>
      </li>
    </ul>
    <div class="contentbox">
      <div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
      <div class="description">gold, 24,000 miles</div>
    </div>
  </div>

user_122558700

Mainly, You're using <ul> and <li> items in the wrong way. UL tag represents a list, and description of an item isn't a list. UL tag should be used wrapping all vehicles and a vehicle should be list item. Other things are:

  • Invalid html body/head tags
  • No need for defining the same defining font-family in each html element separately
  • Code is messy and a lot of CSS properties are use for no reason
  • Try to avoid fixed widths/heights

I removed a lot of your code and tried to prepare a good starting point for you to continue working on whatever you want to build here.

body {
  font-family: sans-serif !important;
}

a {
  text-decoration: none;
}

header {
  margin: 0;
  padding: 2em 5em 4em;
  color: #efefef;
  overflow: hidden;
  position: relative;
}

header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: skewY(-3deg);
  background: red;
  transform-origin: bottom left;
  z-index: -1;
}

.content {
  font-size: 16px;
  padding: 50px 0;
}

.vehicle-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vehicle {
  margin-bottom: 70px;
}

.vehicle__title {
  display: flex;
  justify-content: space-between;
  background-color: yellow;
  padding: 10px;
  margin-bottom: 16px;
}

.vehicle__title h3 {
  font-size: 1.2em;
  max-width: 500px;
}

.vehicle__price {
  text-align: right;
}

.vehicle__info {
  display: flex;
}

.vehicle__description {
  font-size: 14px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Used vans for sale - Van Centre | No.1 in the Midlands</title>
</head>

<body>
  <header>
    <h1>VAN CENTRE</h1>
    <h2>1 Anytown Road, Birmingham</h2>
    <h3>0121 496 0000</h3>
  </header>
  <div class="content">
    <ul class="vehicle-list">
      <li class="vehicle">
        <div class="vehicle__title">
          <h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
          <h3 class="vehicle__price">£22,500</h3>
        </div>
        <div class="vehicle__info">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg" class="vehicle__img" width="340px" />
          <div class="vehicle__description">white, 20,000 miles</div>
        </div>
      </li>
      <li class="vehicle">
        <div class="vehicle__title">
          <h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
          <h3 class="vehicle__price">£36,500</h3>
        </div>
        <div class="vehicle__info">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg" class="vehicle__img" width="340px" />
          <div class="vehicle__description">gold, 24,000 miles</div>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

user_168491800
Related