Floating table-cell right removes height

Question

|information||two lines|
|informatino||two lines|

The problem is with two lines they dissapear as soon as I float that div right .verticalLine

Here is jsfiddle showing the problem https://jsfiddle.net/fh6unb7q/

.side {
  width: 45%;
}
.verticalLine:before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.13em solid #90A4AE;
  border-right: 0.13em solid #90A4AE;
  height: 100%;
  width: 16%;
  margin-left: 42%;
  box-sizing: border-box;
}
.verticalLine {
  position: relative;
  width: 10%;
}
.tr {
  display: table-row;
}
.tc {
  display: table-cell;
}
.year {
  text-align: center;
  color: #607D8B;
}
/* Media Queries */

@media only screen and (max-width: 768px) {
  header h1 {
    font-size: 3rem;
  }
  .tr > div.side {
    display: none;
  }
  .tr > div.verticalLine {
    float: right;
  }
  .tr > div.year {
    float: right;
  }
  .tr > a {
    float: left;
  }
  .side {
    width: 90%;
  }
}

<div style="display: table;">
  <div class="tr">
    <a class="tc side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
    <div class="tc verticalLine">
    </div>
    <div class="tc side"></div>
  </div>

  <div class="tr">
    <div class="tc side"></div>
    <div class="tc verticalLine">
    </div>
    <a class="tc side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
  </div>

</div>

EDIT : Code updated using flex - https://jsfiddle.net/fh6unb7q/1/ HTML:

<div style="display: flex;">
    <a class="side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
    <div class="verticalLine">
    </div>
    <div class="side"></div>
</div>

<div style="display:flex">
    <div class="side"></div>
    <div class="verticalLine">
    </div>
    <a class="side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
</div>

CSS:

.side {
  width: 45%;
}

.verticalLine:before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.13em solid #90A4AE;
  border-right: 0.13em solid #90A4AE;
  height: 100%;
  width: 16%;
  margin-left: 42%;
  box-sizing: border-box;
}

.verticalLine {
  position: relative;
  width: 10%;
}



/* Media Queries */

@media only screen and (max-width: 768px) {
  div.side {
    display: none;
  }
  div.verticalLine {
    float: right;
  }

  a {
    float: left;
  }
  .side {
    width: 90%;
  }
}

As you can see still it is not aligned properly although || are still visible after media query is executed.

I would want it to be aligned like so

|information||two lines|
|informatino||two lines|

Could you explain a little about what you're trying to accomplish with this layout? Are you open to other layout techniques? — Michael Benjamin, Sep 13 '16 at 14:16
@Michael_B Yes I am open to other techniques this one seemed the simplest. For design purposes I wanted to have |text| |decoration| |empty| |empty| |decoration| |text| but when the resolution is smaller it doesn't make sense to keep the empty part that is why I set the display to none of empty div and I want them to be aligned so |text| |decoration| |text| |decoration| and not |text| |decoration| |decoration| |text| — Higeath, Sep 13 '16 at 14:20
You may want to consider a [flexbox solution](http://stackoverflow.com/q/32551291/3597276), which will provide you with more layout options and flexibility than tables and floats. — Michael Benjamin, Sep 13 '16 at 14:46
@Michael_B its right, but why do you use divs with display:table instead of tables directly? — legomolina, Sep 13 '16 at 14:58
@legomolina it just allows me to change how the table behaves if I will ever need that change from table-cell to block display etc. — Higeath, Sep 13 '16 at 15:05
@Higeath ah, ok. So use flex, it's the future. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — legomolina, Sep 13 '16 at 15:06
@legomolina I have added update using flex I still can't get alignment properly. — Higeath, Sep 13 '16 at 16:18

Johannes · Accepted Answer · 2016-09-13T20:00:10.330

1

Like this: ?

https://jsfiddle.net/uce9hp9n/

Then just add flex-direction: row-reverse; to the second line container.

ADDITION/EDIT after question in COMMENT:

With the flex solution you can assign the same class to each row container and create a CSS rule for that class. Then create another rule like this:

.my_row { 
  display:flex; 
}
.my_row:nth-child(even): { 
  flex-direction:row; 
}

This will reverse the order in every second row.

edited Sep 13 '16 at 20:00

answered Sep 13 '16 at 16:26

Johannes

64,305
18
73
130

Is there a more universal solution? Since rows are alternating so it is always |info| |decoration| |decoration| |info| etc. it made sense with floats because I could fload info left and decoration right so it would always work. – Higeath Sep 13 '16 at 17:41
please note the addition to my answer – Johannes Sep 13 '16 at 20:00

Floating table-cell right removes height

1 Answers1