How to align unordered list elements with CSS?

Question

I would like to build a sample "webshop" project where I would like to list books as on the picture. How can I align text and pictures given this HTML code with CSS similarly as:

HTML code of one book (note this code is replicated the same way with different texts:

 <li class="book">
        <ul>
           <li class="bookcover">
              <a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
                 <img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
                      alt="Book Cover for HTML and CSS: Design and Build Websites"/>
              </a>
           </li>
           <li class="author">Jon Duckett</li>
           <li class="title">
              <a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">HTML and CSS: Design and Build Websites</a>
           </li>
           <li class="publisher">John Wiley &amp; Sons</li>
           <li class="date">November 2011</li>
           <li class="isbn">ISBN:  1118008189</li>
        </ul>

     </li>

Is there a universal way with CSS to format this?

Answer 1

There are many ways to achieve this. I do want to mention before proceeding that @Tom Faltesek raises a good point. If you have any control over the HTML code, it would be best to approach this with more semantically accurate markup. If, for example, you had the freedom to arrange it this way...

<article class="book">
  <div class="book__info">(...)</div>
  <div class="book__thumbnail">(...)</div>
</article>

...then your CSS could be done in this way:

.book {
  font-size: 0;
}

.book__info,
.book__thumbnail {
  display: inline-block;
  font-size: 1rem;
}

.book__info {
  width: 75%;
}

.book__thumbnail {
  width: 25%;
}

Explanation: Inline-block elements naturally follow each other because they are like block elements that display inline with the text. That in mind, setting font-size: 0; on the parent avoids the natural text space that would normally appear between the elements, so that 25% + 75% only spans 100% of the width without extra text spaces between. Remember to reset your font-size on the inner elements with this trick, though.

However, in the way that you are asking this question, I assume you may not have control over this HTML structure. @Gildas.Tambo 's answer will work, visually, but there are challenges that come with floats. The main issue is that float removes an element from the document's flow, so it does not contribute to the height of it's parent. That means the parent has the potential to be 0 pixels high even if its contents are 500+ pixels high. This can cause all sorts of weird buggy layout issues when you get into more involved css.

This seems like a good use case for CSS Grid. At this point, pretty much all the major browsers support it, and it's a hell of a good weapon to have in your arsenal.

Have a look at the code below. Use grid-template-areas to quite literally mock up your layout in the form of words to correspond with elements (in this case, each of your <li>s) and you can span across multiple rows with one element by assigning it to the entire grid area. In the example below, I provided 5 rows and marked the left column as "info" and the right column as "thumbnail", and then to take up all the available space for thumbnail, I just assign .bookcover to it with grid-area: thumbnail;. Don't worry too much about the fancy stuff I did with grid-template-rows, but know that you can use that property to distribute the height of each row.

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.book ul {
  display: grid;
  grid-template-areas:
    "info thumbnail"
    "info thumbnail"
    "info thumbnail"
    "info thumbnail"
    "info thumbnail";
  grid-template-rows: repeat(4, auto) 1fr;
}

.bookcover {
  grid-area: thumbnail;
}

<li class="book">
  <ul>
    <li class="bookcover">
      <a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
        <img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
             alt="Book Cover for HTML and CSS: Design and Build Websites"/>
      </a>
    </li>
    <li class="author">Jon Duckett</li>
    <li class="title">
      <a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">HTML and CSS: Design and Build Websites</a>
    </li>
    <li class="publisher">John Wiley &amp; Sons</li>
    <li class="date">November 2011</li>
    <li class="isbn">ISBN:  1118008189</li>
  </ul>

</li>

Answer 2

You can use float - CSS:left and display : block

.book li{
  display: block
}
.bookcover{float:right}

 <li class="book">
        <ul>
           <li class="bookcover">
              <a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
                 <img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
                      alt="Book Cover for HTML and CSS: Design and Build Websites"/>
              </a>
           </li>
           <li class="author">Jon Duckett</li>
           <li class="title">
              <a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">HTML and CSS: Design and Build Websites</a>
           </li>
           <li class="publisher">John Wiley &amp; Sons</li>
           <li class="date">November 2011</li>
           <li class="isbn">ISBN:  1118008189</li>
        </ul>

     </li>