Arranging content in a horizontal row using div elements

Question

Arranging content in a horizontal row using div elements

My webpage features two div elements. One of the div represents header content, while the other div displays details content. I want both sets of content to be aligned side by side. Specifically, I need the details content to always appear on the right-hand side. If the detail content exceeds the available space, any extra content should automatically move to the next line. For example, if File4.pdf and File5.pdf are too long, they should wrap onto a new line.

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

I initially achieved this layout using a table, but now I would prefer to use div elements instead. However, when I attempt to use divs, the entire content shifts to a new line when it doesn't fit within the designated area.

To see my current implementation, check out the JSFiddle.

html css

Answer 1

Answer №1

To accommodate the right side elements, you'll need a container with the following style:

float:left;
width:calc(100% - 222px); /*the -222px is the width of the left element + the padding + the margin*/
overflow:hidden;

Here's an updated example (adapted from provided jsfiddle):

dl {
  margin-bottom: 30px;
}
dl dt {
  float: left;
  font-weight: bold;
  margin-right: 2px;
  width: 200px;
}
dl dd {
  margin: 2px 0;
}
.details-container {
  float: left;
  width: calc(100% - 222px);
  overflow: hidden;
}

<div style="float:left;padding-right:20px;">
  <dl>
    <dt>Name:</dt>
    <dd>Foo Bar</dd>
    <dt>Date:</dt>
    <dd>01/04/2017</dd>
  </dl>
</div>
<div class="details-container">
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File1.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File2.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File3.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File4.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
</div>

Answer 2

To accommodate the right side elements, you'll need a container with the following style:

float:left;
width:calc(100% - 222px); /*the -222px is the width of the left element + the padding + the margin*/
overflow:hidden;

Here's an updated example (adapted from provided jsfiddle):

dl {
  margin-bottom: 30px;
}
dl dt {
  float: left;
  font-weight: bold;
  margin-right: 2px;
  width: 200px;
}
dl dd {
  margin: 2px 0;
}
.details-container {
  float: left;
  width: calc(100% - 222px);
  overflow: hidden;
}

<div style="float:left;padding-right:20px;">
  <dl>
    <dt>Name:</dt>
    <dd>Foo Bar</dd>
    <dt>Date:</dt>
    <dd>01/04/2017</dd>
  </dl>
</div>
<div class="details-container">
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File1.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File2.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File3.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File4.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
</div>

Answer 3

Answer №2

To achieve your desired outcome, it is important to specify what exactly you are looking for. There are various approaches depending on factors such as the number of elements per line, responsiveness, or whether the content is within a fixed-size element. Do you need scrollbars to appear if the content exceeds the container's size?

Consider the following hints:

According to Gaby aka G. Petrioli, using a wrapper div around one or both of your divs may be necessary
If you have a fixed line height and are okay with scrollbars appearing when content wraps, set the height of both divs equally with 'overflow:scroll'. You can specify horizontal or vertical scrollbars using 'overflow-x:scroll' or 'overflow-y:scroll'
If you want items that don't fit to be hidden, define dimensions and add 'overflow:hidden'. This will make anything outside the wrapping div disappear
In cases where only one dimension is set, like in Gaby aka G. Petrioli's example, using 'overflow:hidden' can prevent overlapping when content wraps to a new line
If you require a certain number of items per line with each tile resized or scrolled, consider using percentages for layout. This approach is more complex and requires a specific question for a complete answer

Answer 4

To achieve your desired outcome, it is important to specify what exactly you are looking for. There are various approaches depending on factors such as the number of elements per line, responsiveness, or whether the content is within a fixed-size element. Do you need scrollbars to appear if the content exceeds the container's size?

Consider the following hints:

According to Gaby aka G. Petrioli, using a wrapper div around one or both of your divs may be necessary
If you have a fixed line height and are okay with scrollbars appearing when content wraps, set the height of both divs equally with 'overflow:scroll'. You can specify horizontal or vertical scrollbars using 'overflow-x:scroll' or 'overflow-y:scroll'
If you want items that don't fit to be hidden, define dimensions and add 'overflow:hidden'. This will make anything outside the wrapping div disappear
In cases where only one dimension is set, like in Gaby aka G. Petrioli's example, using 'overflow:hidden' can prevent overlapping when content wraps to a new line
If you require a certain number of items per line with each tile resized or scrolled, consider using percentages for layout. This approach is more complex and requires a specific question for a complete answer

Answer 5

Answer №3

Have you tried using FlexBox for your layout?

<div class="container">
<div class="left">
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value asd asd as das d</div>
  </div>
</div>
<div class="right">
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value asd asd as</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value adasd</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
</div>
</div>

.container {
   display: flex;
 }

 .item {
   padding-bottom: 30px;
 }

  .container .left {
    display: flex;
    align-items: center;
    padding-right: 50px;
  }
    .container .right {
      display: flex;
      width: 70%;
      flex-wrap: wrap;
    }

    .container .right .item {
      width: 30%;
    }

Check out an example of this layout in action here

Answer 6

Have you tried using FlexBox for your layout?

<div class="container">
<div class="left">
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value asd asd as das d</div>
  </div>
</div>
<div class="right">
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value asd asd as</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value adasd</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
</div>
</div>

.container {
   display: flex;
 }

 .item {
   padding-bottom: 30px;
 }

  .container .left {
    display: flex;
    align-items: center;
    padding-right: 50px;
  }
    .container .right {
      display: flex;
      width: 70%;
      flex-wrap: wrap;
    }

    .container .right .item {
      width: 30%;
    }

Check out an example of this layout in action here

Arranging content in a horizontal row using div elements

Answer №1

Answer №2

Answer №3

Similar questions

My @media queries are causing me some issues

Adjustments made to the size of the h1 font

Please select the links located beneath the see-through triangular or polygonal shapes

Leveraging JSON data with jQuery's ajax function

Tips for resuming a video playback in HTML5 after pausing it for a brief moment

Instructions for using jQuery to replace the final <a> tag within a specific section

Focusing solely on the presence of lowercase characters within the text field

Best Practices for Handling Form State in ReactJS with Redux

Exploring the power of Vue.js by utilizing nested components within single file components

How to choose an option from a dropdown menu using React

Authenticating with Objective-C

Hide the navigation menu when a page link is selected

Using JavaScript, add a complex JSON record to a JSON variable by pushing it

Arranging CSS text in a parallel format and aligning it vertically

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

When attempting to retrieve a value from a dropdown menu in HTML using PHP, an undefined index error occurs

Deleting a division with the help of media queries

The most effective method for positioning a child element to the left and top using Flexbox grid

Creating an animated transition for an element's height with CSS