How to make 4 items per row in left and 4 in right

Question

I want to achieve the below. I tried this code but still can't achieve this. Please see attached images. 4 images; 2 in left with text next to it... and another 2 images in right with text next to it. Exactly as it is in the attached images.

.thumbnailLeftSmallIconBottom {
  float: left;
  /*width:50%;*/
  padding: 5px;
  /*clear: both;*/
  /*display:inline-block;*/
}

.thumbnailRightSmallIcon {
  float: right;
  width: 50%;
}

.thumbnailSmallImageAll::after {
  content: "";
  display: table;
  clear: both;
}

<div class="thumbnailLeftSmallIcon1">
  <div class="thumbnailLeftSmallIconTop">
    <img class="thumbnailSmallImage" src="~/Content/images/house_50px.png" alt="Image">
  </div>
  <div class="thumbnailLeftSmallIconTop">
    <span> @Html.DisplayFor(modelItem => house) </span>
  </div>

  <div class="thumbnailLeftSmallIconBottom">
    <img class="thumbnailSmallImage" src="~/Content/images/bedroom_80px.png" alt="Image">
  </div>
  <div class="thumbnailLeftSmallIconBottom">
    <span> @Html.DisplayFor(modelItem => bedroom) </span>
  </div>

Answer 1

This layout is pretty simple to achieve with Flexbox or Grid too. As the image and text are together, you can put them inside one div so that will become 1 item and all the 4 items can be wrapped inside one parent container. Now there are multiple ways to achieve this. I've created 2 examples for you on CodePen. One way is to let the items flow inside a Flex container (parent) and give the parent a width or max-width, then items will come one after the other. Another way is to have two child items inside the parent Flex which you can imagine as columns, and your content goes inside of those two columns. Be careful with giving fixed widths, especially if you want to make it responsive.

example 1 : https://codepen.io/gzaman/pen/ExxWGgy?editors=1100

.container {
  display: flex;
  background: pink;
  max-width: 460px;
  flex-wrap: wrap;
  justify-content: center;
}

.flexitem {
  margin: 4px;
  padding: 8px;
  background: salmon;
  width: 200px;
  display: flex;
  align-items: center;
}

.thumbnailSmallImage {
  height: 20px;
}

<div class="container">
  <div class="flexitem">
    <div class="thumbnailLeftSmallIconTop">
      <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image">
    </div>
    <div class="thumbnailLeftSmallIconTop">
      <span>Text in span 1</span>
    </div>
  </div>
  <div class='flexitem'>
    <div class="thumbnailLeftSmallIconBottom">
      <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image">
    </div>
    <div class="thumbnailLeftSmallIconBottom">
      <span>Text in span 2</span>
    </div>
  </div>
  <div class='flexitem'>
    <div class="thumbnailLeftSmallIconBottom">
      <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image">
    </div>
    <div class="thumbnailLeftSmallIconBottom">
      <span>Text in span 3</span>
    </div>
  </div>
  <div class='flexitem'>
    <div class="thumbnailLeftSmallIconBottom">
      <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image">
    </div>
    <div class="thumbnailLeftSmallIconBottom">
      <span>Text in span 4</span>
    </div>
  </div>
</div>

example 2 : https://codepen.io/gzaman/pen/ZEEeVjW?editors=1100

.container {
  display: flex;
  max-width: 600px;
  flex-wrap: wrap;
  background: pink;
  justify-content: center;
}

.flexitem {
  width: 250px;
}

.thumbnailSmallImage {
  height: 20px;
}

.item {
  background: lightsalmon;
  display: flex;
  margin: 4px;
  padding: 8px;
}

<div class="container">
  <div class='flexitem'>
    <div class="item">
      <div class="thumbnailLeftSmallIconTop">
        <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image">
      </div>
      <div class="thumbnailLeftSmallIconTop">
        <span>Text in span 1</span>
      </div>
    </div>
    <div class='item'>
      <div class="thumbnailLeftSmallIconBottom">
        <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image">
      </div>
      <div class="thumbnailLeftSmallIconBottom">
        <span>Text in span 2</span>
      </div>
    </div>
  </div>
  <div class="flexitem">
    <div class='item'>
      <div class="thumbnailLeftSmallIconBottom">
        <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image">
      </div>
      <div class="thumbnailLeftSmallIconBottom">
        <span>Text in span 3</span>
      </div>
    </div>
    <div class='item'>
      <div class="thumbnailLeftSmallIconBottom">
        <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image">
      </div>
      <div class="thumbnailLeftSmallIconBottom">
        <span>Text in span 4</span>
      </div>
    </div>
  </div>
</div>

We've dumped table layouts more than a decade ago, so please refrain from using that and go with either Flex or Grid.

Let me know if you get stuck somewhere. :)

you can learn more about Flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I made a flex-based fiddle that you can mimic with your classes and uses valid, up-to-date CSS instead of the float that were used years ago.

HTML:

<div class="container">
  <div class="left">
    <div class="image-container">
      <img class="thumb" src="~/Content/images/house_50px.png" alt="Image">
    </div>
    <div class="text">
      <span> @Html.DisplayFor(modelItem => house) </span>
    </div>
  </div>
  <div class="right">
    <div class="image-container">
      <img class="thumb" src="~/Content/images/bedroom_80px.png" alt="Image">
    </div>
    <div class="text">
      <span> @Html.DisplayFor(modelItem => bedroom) </span>
    </div>
  </div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: row;
}

.left, .right {
  display: flex;
  flex-direction: column;
  width: 40vw;
  background-color: yellowgreen;
  margin-right: 5vw;
}

https://jsfiddle.net/tamok48e/

Note: the background and width were added only for clarity purposes but can safely be removed in your final code.

Answer 3

try the table:

<table>
    <tr>
        <td>
            <div class="thumbnailLeftSmallIconTop">
                <img class="thumbnailSmallImage" src="~/Content/images/house_50px.png" alt="Image">
                <span> @Html.DisplayFor(modelItem => house) </span>
            </div>
        </td>
        <td>
            <div class="thumbnailLeftSmallIconBottom">
                <img class="thumbnailSmallImage" src="~/Content/images/bedroom_80px.png" alt="Image">
                <span> @Html.DisplayFor(modelItem => bedroom) </span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="thumbnailLeftSmallIconTop">
                <img class="thumbnailSmallImage" src="~/Content/images/house_50px.png" alt="Image">
                <span> @Html.DisplayFor(modelItem => house) </span>
            </div>
        </td>
        <td>
            <div class="thumbnailLeftSmallIconBottom">
                <img class="thumbnailSmallImage" src="~/Content/images/bedroom_80px.png" alt="Image">
                <span> @Html.DisplayFor(modelItem => bedroom) </span>
            </div>
        </td>
    </tr>
</table>

tr means row
td means cell