Aligning content side by side using div

Question

I have two div . One div represent header content and other div represent details content. I want the content of both the div aligned side by side. The content of the right div (ie details) should always appear on right. If the detail content doesn't fit then extra content should appear in next line. Something like below where File4.pdf and File5.pdf doesn't fit so it goes to next line.

I was able to do this using table but i would like to use div instead of table. However using div when the content doesn't fit the whole content moves to next line.

here is the JSfiddle

Answer 1

You would need a container for the right side elements, 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;

---

Full updated example ( 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

You should be more precise about what you want exactly, because there are many different ways to acheive this, depending on if you have a fixed number of elements per line for the 'details', if you want it to be responsive, or is a part of something else that is in a fixed-size element? Do you want scrolls to appear if any list in a div becomes too big?

Here are some clues:

• as said by Gaby aka G. Petrioli, you will most likely need a wrapper div around one or both of your divs to do what you want
• if the height of a line is fixed and you don't matter scrollbars when content gets to a new line, just set the height of both divs to the same value, with 'overflow:scroll'. You can choose if scrollbars are horizontal or vertical by using specifically 'overflow-x:scroll' or 'overflow-y:scroll'
• if you still have fixed height line but want the items that don't fit not to be shown, still define the dimensions, adding 'overflow:hidden'. This way all that is out of the wrapping div will disappear.
• when a dimension is set and not the other, like in Gaby aka G. Petrioli example, using 'overflow:hidden' can fix the fact that the wrapping div doesn't have its dimensions updated when floating content gets to a new line (provoking elements to sometimes overlap each other)
• if you want items to be forced to a certain number per line (with the content of each "tile" being forced to be resized or scrolled), you will need a layout with elements defined in %. This will be more tricky and need a more precise question to be fully answerable..

Answer 3

FlexBox ??

<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%;
    }

Work example https://jsfiddle.net/494wrsyo/2/