Arranged in individual rows, the items are placed from left to right

Question

Arranged in individual rows, the items are placed from left to right

I am looking to display multiple rows of data, with each row potentially having a spacer element that shifts the text on that row to the right. The spacer needs to be contained in its own div element for styling purposes such as adding borders or background colors. Similarly, the text within each row also needs to be in a separate div for individual styling options. It is important to note that the text content within these divs may exceed the boundaries of the containing box.

https://i.sstatic.net/qOXQv.png

I have experimented with CSS properties like float:left, but I am having difficulty clearing the float to achieve proper row alignment. I have also tried using display:inline-block, but have not been successful in implementing it effectively.

Below is a snippet of the basic HTML structure I have been working with. Despite trying various CSS configurations, I believe starting from scratch may result in a more optimized solution.

<div class="row">
    <div class="text" style="width:500px;">Row one text</div>
</div>
<div class="row">
    <div class="spacer" style="width:500px;">Row two spacer</div>
    <div class="text" style="width:200px;>Row 2 text</div>
</div>

<div class="row">
    <div class="spacer" style="width:700px;">Row three spacer</div>
    <div class="text" style="width:100px;">Row 3 text overflowing</div>
</div>

html css

Answer 1

Answer №1

If you're looking to achieve a layout similar to the one shown in the image, complete with spaces and all, I suggest utilizing the power of Flexbox.

I've taken the liberty to recreate the code for your convenience. Please let me know if you encounter any issues.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .item {
        flex: 0 32%;
        height: 100px;
        margin-bottom: 2%; /* (100-32*3)/2 */
        font-size: 30px;
      }
      .itemSec {
        font-size: 15px;
      }
    </style>

    <div class="container">
      <div class="item">
        first
        <div class="itemSec">column add text</div>
      </div>

      <div class="item">
        second
        <div class="itemSec">column add text</div>
      </div>

      <div class="item">
        third
        <div class="itemSec">column add text</div>
      </div>
    </div>
  </body>
</html>

Answer 2

If you're looking to achieve a layout similar to the one shown in the image, complete with spaces and all, I suggest utilizing the power of Flexbox.

I've taken the liberty to recreate the code for your convenience. Please let me know if you encounter any issues.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .item {
        flex: 0 32%;
        height: 100px;
        margin-bottom: 2%; /* (100-32*3)/2 */
        font-size: 30px;
      }
      .itemSec {
        font-size: 15px;
      }
    </style>

    <div class="container">
      <div class="item">
        first
        <div class="itemSec">column add text</div>
      </div>

      <div class="item">
        second
        <div class="itemSec">column add text</div>
      </div>

      <div class="item">
        third
        <div class="itemSec">column add text</div>
      </div>
    </div>
  </body>
</html>

Answer 3

Answer №2

To solve this issue, one approach is to insert a <div> in each row that clears the float:left. Here's an example:

<div class="row">
    <div class="text" style="width:500px; float:left;">Row one text</div>
    <div style='clear:both;'></div>
</div>
<div class="row">
    <div class="spacer" style="width:500px; height:25px; float:left;">Row two spacer</div>
    <div class="text" style="width:200px; float:left;">Row 2 text</div>
    <div style='clear:both;'></div>
</div>
<div class="row">
    <div class="spacer" style="width:700px; height:25px; float:left;">Row three spacer</div>
    <div class="text" style="width:100px; height:25px; float:left;">Row 3 text overflowing</div>
    <div style='clear:both;'></div>
</div>

While this method may not be the most elegant, it effectively resolves the issue.

The CSS code below helps handle the overflowing text:

.text { white-space: nowrap; }

Answer 4

To solve this issue, one approach is to insert a <div> in each row that clears the float:left. Here's an example:

<div class="row">
    <div class="text" style="width:500px; float:left;">Row one text</div>
    <div style='clear:both;'></div>
</div>
<div class="row">
    <div class="spacer" style="width:500px; height:25px; float:left;">Row two spacer</div>
    <div class="text" style="width:200px; float:left;">Row 2 text</div>
    <div style='clear:both;'></div>
</div>
<div class="row">
    <div class="spacer" style="width:700px; height:25px; float:left;">Row three spacer</div>
    <div class="text" style="width:100px; height:25px; float:left;">Row 3 text overflowing</div>
    <div style='clear:both;'></div>
</div>

While this method may not be the most elegant, it effectively resolves the issue.

The CSS code below helps handle the overflowing text:

.text { white-space: nowrap; }

Arranged in individual rows, the items are placed from left to right

Answer №1

Answer №2

Similar questions

Creating a form with an input field and an image side by side in HTML

javascript for each and every textarea

Is it possible to create a CSS grid with a varying number of columns?

A guide to creating a personalized horizontal dashed separator in Material UI

Is there a way to create a miniature camera or map within a scene in three.js without cropping the viewport?

Personalized labels for your JQuery Mobile sliders

updating the HTML DOM elements using JavaScript is not yielding any response

Unable to get CSS transition to function properly after adding a class using jQuery

The <span> tag creating a surprise gap following a word

The number of contents determines the dynamic CSS border style

Issues arise when the elements <html> and <body> fail to adhere to a 100

The behavior of the div element is not as expected when using "<select>", but it functions properly when using "<input>"

Including a Textbox completely disrupts the Menu design

Can anyone provide a method for identifying the location of the page fold on a specific viewport?

How to set DIVS to be hidden when the page first loads

The issue of blank spaces appearing in Outlook 2007 within conditional comments

Is the HTML templating mechanism compatible with Angular?

The sidebar on the right side of the screen is content to relax beneath my

Conceal Class When Input Value is "X"

Attempting to implement Ajax for my AddToCart feature while iterating through a form