1

I feel like this should be easy but I can't get it. I have a left column which can be anywhere from 20 to 2000 pixels tall. I then have a mixture of content: tables, (optionally floating div's), text and images for the rest of the page.

I want multiple rows to wrap as needed next to the side column. Then when the side column is done wrapping will consume the space. I have a sample up on JSFiddle which demonstrates the problem.

I originally thought a flex container with a left floating column would this, however it is not working.

https://jsfiddle.net/heegar/c40wf28c/

CSS

.flexContainer {
  display: flex;
  width: 740px;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.blue {
  background-color: blue;
  min-height: 25px;
  width: 240px;
}

.green {
  background-color: green;
  min-height: 40px;
  width: 490px;
}

.yellow {
  background-color: yellow;
  min-height: 90px;
  width: 240px;
}

.orange {
  background-color: orange;
  width: 240px;
  min-height: 30px;
}

.red {
  background-color: red;
  text-align: left;
  vertical-align: top;
  font-size: .8em;
  float: left;
  width: 240px;
}

.CadetBlue {
  background-color: CadetBlue;
  min-height: 40px;
  width: 490px;
}

.GoldenRod {
  background-color: GoldenRod;
  width: 240px;
  min-height: 30px;
}

.layoutAuto {
  table-layout: auto;
}

.DataTableWithBorder {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}

.blackback {
  background-color: black;
}

HTML

<body style="width:740px;">
  <div class="flexContainer">
    <div class="red">

      <h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Ocular History</h3>
      <span style="font-weight:bold; padding-top:5px;">headaches</span>
      <br />
      <h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Ocular Surgical History</h3>
      <span style="font-weight:bold; padding-top:5px;">corneal</span>
      <br /><span style="font-weight:bold; padding-top:5px;">injection(s) of</span>
      <br /><span style="font-weight:bold; padding-top:5px;">lid procedure of·ectropion repair</span>
      <br /><span style="font-weight:bold; padding-top:5px;">NLD probing</span>
      <br />

      <h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Vitals</h3>
      <span style="font-weight:bold; padding-top:5px;">Temp: 98.8&nbsp;Deg Fer</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Pulse: a 101 bpm</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Blood Pressure:&nbsp;Sys what?&nbsp;Dia what?</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Respiratory Rate: huh? bpm</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Weight: 199&nbsp;Lizards</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Height: 515&nbsp;Red Ants</span>
      <br /><span style="font-weight:bold; padding-top:5px;">BMI: 21.18 egg</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Blood Glucose Level: bgl&nbsp;233 vh</span>
      <br />
    </div>

    <div class="green">
      Section 1 - should NOT auto fill to bottom of Red column
    </div>

    <div class="yellow">
      Section 2 - should move under section 1 and to the right of the red column
    </div>

    <div class="orange">
      Section 3 - should move next to Section 2
    </div>

    <div class="blue">
      <h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Hertel</h3>
      <strong>Base</strong> 91mm
      <br /><strong>OD</strong>&nbsp;18mm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>OS</strong>&nbsp;23mm

    </div>
    <div class="GoldenRod">
      <h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Amsler Grid</h3>
      <table>
        <tr>
          <td class="BoldText top">OS</td>
          <td>
            <table class="amslerTable layoutFixed">
              <tr>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
          </td>
          <td class="BoldText top">OD</td>
          <td>
            <table class="amslerTable layoutFixed">
              <tr>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="blackback">&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="blackback">&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="blackback">&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="blackback">&nbsp;</td>
              </tr>
              <tr>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
                <td class="blackback">&nbsp;</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>

    <div class="green">
      sample data
    </div>

    <div class="orange">
      <h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Visual Acuity</h3>
      <table class="stripedTable DataTableWithBorder layoutFixed">
        <tr class="BoldText">
          <td>&nbsp;</td>
          <td>CC</td>
          <td>SC</td>
          <td>PH</td>
        </tr>
        <tr>
          <td class="BoldText">OD</td>
          <td>20/25</td>
          <td>20/20</td>
          <td>20/15</td>
        </tr>
        <tr>
          <td class="BoldText">OS</td>
          <td>20/25</td>
          <td>20/20</td>
          <td>20/15</td>
        </tr>
        <tr>
          <td class="BoldText">OU</td>
          <td>20/25</td>
          <td>20/20</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <br />Test Used: Sn
    </div>

    <div class="blue">
      blah blah blah
    </div>

    <div class="CadetBlue">
      <h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Auto Refraction</h3>
      <strong>Age:</strong> 299 quarter days&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Purpose:</strong> justa type
      <table class="">
        <tr>
          <td class="BoldText">OD</td>
          <td>-1.50</td>
          <td>+0.75</td>
          <td>x 11</td>
          <td>VaD 20/28/10</td>
          <td>VaN 20/2</td>
        </tr>
        <tr>
          <td class="BoldText">OS</td>
          <td>-3.00</td>
          <td>+1.00</td>
          <td>x 154</td>
          <td>VaD 20/48/13</td>
          <td>VaN 20/2</td>
        </tr>
      </table>
    </div>

  </div>


</body>
Adam Heeg
  • 1,704
  • 1
  • 14
  • 34
  • 1
    First thing to note is that the `float` property is ignored in a flex container. You can be assured that the `float: left` on your flex item will not do anything. – Michael Benjamin Aug 16 '16 at 21:15
  • @Michael_B that helps explain that part. What am I missing to get the desired effect? – Adam Heeg Aug 17 '16 at 13:42
  • The type wrapping you want represents a grid, and flexbox is not a grid system: http://stackoverflow.com/a/34481128/3597276 – Michael Benjamin Aug 17 '16 at 13:48
  • @Michael_B okay, thank you. I feared that was the case, but I had hoped I could float a div over on the left, kind of like images where text wraps around the image and continues in the white space below it. Since that isn't possible my other Idea is to use javascript to find all elements in Main content area whose Y start is greater than the Y end of the left column and move them into a place holder div below. That may be the best option - though I don't know how to do it yet. – Adam Heeg Aug 17 '16 at 13:57
  • Consider Masonry, a possible JS solution. It's mentioned in my answer linked to above. Good luck! – Michael Benjamin Aug 17 '16 at 14:00

0 Answers0