Increasing the width of a line to fill the entire space using CSS properties

Question

Increasing the width of a line to fill the entire space using CSS properties

Seeking alternative ideas to replace my current solution using only CSS for one of the problems. I already have a working JS solution, but I'm interested in exploring a CSS-only approach.

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

A) All elements here have the same width, only the quantity may vary (more or less).

B) Need the line to expand to full width and address the empty space on the left (the main challenge).

C) The text is dynamic, so the width varies constantly.

Is there a way to style the B) element to fill the available width?

html css fluid-layout

Answer 1

Answer №1

Achieving this layout can be done using Flexbox. Simply apply the style flex: 1 to the lines and they will automatically distribute the remaining space evenly.

.content,
.a {
  display: flex;
  align-items: center;
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: red;
}
.line {
  flex: 1;
  border-bottom: 1px dashed black;
}

<div class="content">
  <div class="a">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="line"></div>
  <div class="text">Lorem ipsum.</div>
  <div class="line"></div>
  <div class="text">Text</div>
</div>

Answer 2

Achieving this layout can be done using Flexbox. Simply apply the style flex: 1 to the lines and they will automatically distribute the remaining space evenly.

.content,
.a {
  display: flex;
  align-items: center;
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: red;
}
.line {
  flex: 1;
  border-bottom: 1px dashed black;
}

<div class="content">
  <div class="a">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="line"></div>
  <div class="text">Lorem ipsum.</div>
  <div class="line"></div>
  <div class="text">Text</div>
</div>

Increasing the width of a line to fill the entire space using CSS properties

Answer №1

Similar questions

Shine a light on the input with a captivating outer

Ensure uniform height for images in the absence of specific dimensions

Conceal Element without Eliminating from the Design

Guide to highlighting input field text using Angular

Tips for incorporating a personalized CSS stylesheet while utilizing Bootstrap

Randomly choose one of 5 pages and insert an HTML element at different intervals using JavaScript, jQuery, MySQL, or PHP

What could be causing the span tag to not have CSS applied and the background image to not be displaying

A guide to spinning an image in every direction with CSS

Replicating a row in a table without disrupting a button within the row

Implementing the React Router into a ReactJS project: Methods to prevent users from clicking on links within React-Router's <Link> component

Align images at the center of a division using the Bootstrap framework

Using Jquery to Select Start and End Dates

What could be causing my handle button to slide off the timeline towards the right?

Preventing absolute div from spilling out of its parent container

Tips for recalling the display and concealment of a div element using cookies

Tips for locating an element within pre-processed HTML content

Designing a dropdown menu using CSS

Invoke a method in a separate class

When a user clicks on a child element of an anchor tag, the function will

Utilize the grid system from Bootstrap to style HTML div elements