'Attempting to get sequential div containers to not overlap previous no wrap text box without specifying fixed width

I know there have been a quite a few like this on here and other sites already, but am kicking myself over this and really should have solved this issue by now - so here it is:

https://jsfiddle.net/p3reauLf/1/

.container {
  float: left;
  position: relative;
  padding-right: 10px;
  overflow: hidden;
  background-color: red;
}

.vert-text {
  float: left;
  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
  background-color: black;
  color: white;
  margin-right: 5px;
  padding: 5px;
  height: 100%;
}

.info {
  position: relative;
  white-space: nowrap;
  display: flow-root;
}
<div class="container">
  <div class="vert-text"><strong>TRAX</strong></div>
  <div class="info"><strong>A1.</strong> Activator (Untitled Mix 1)<br>
    <strong>B1.</strong> Activator (Untitled Mix 2)<br>
    <strong>B2.</strong> Activator (Untitled Mix 3)<br></div>
</div>
<div class="container">
  <div class="vert-text"><strong>DATA</strong></div>
  <div class="info"><strong>Label:</strong> Vicious Muzik Records<br>
    <strong>Released:</strong> 1994<br>
    <strong>Condition:</strong> VG+ to NM-<br></div>
</div>

In this JS fiddle you can see the 2 boxes side by side with text (dynamic on my web site) where the text appears to be overlapped by the second box - and i have no clue how to make the width of the boxes adjust to size of the text within -

of course i would like the box on the right to remain to the right of the first box, unless of course the page gets to narrow in which case it bumps down under the 1st box -

at least that is what i am trying to achieve - live page here:

on this live page i have adjusted to the width to be fixed, but sometimes text is longer or much shorter and it either gets truncated or is too long and looks off...

appreciate all the help i can get ! thanks

csscss-floatword-wrap


Solution 1:[1]

You can use the modern CSS grid layout mode, and create two columns in a media query with the breakpoint of your choosing:

body {
  display: grid;
  grid-template-columns: 1fr;
}

.container {
  float: left;
  position: relative;
  padding-right: 10px;
  overflow: hidden;
  background-color: red;
}

.vert-text {
  float: left;
  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
  background-color: black;
  color: white;
  margin-right: 5px;
  padding: 5px;
  height: 100%;
}

.info {
  position: relative;
  white-space: nowrap;
  display: flow-root;
}

@media (min-width: 35rem) {
  body {
    grid-template-columns: 1fr 1fr;
  }
}
<div class="container">
  <div class="vert-text"><strong>TRAX</strong></div>
  <div class="info"><strong>A1.</strong> Activator (Untitled Mix 1)<br>
    <strong>B1.</strong> Activator (Untitled Mix 2)<br>
    <strong>B2.</strong> Activator (Untitled Mix 3)<br></div>
</div>
<div class="container">
  <div class="vert-text"><strong>DATA</strong></div>
  <div class="info"><strong>Label:</strong> Vicious Muzik Records<br>
    <strong>Released:</strong> 1994<br>
    <strong>Condition:</strong> VG+ to NM-<br></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zach Jensz

Related Questions