Higeath Higeath - 2 months ago 9
CSS Question

Floating table-cell right removes height

I have table with 3 cells

|information| |two lines| |empty|
and second row
|empty| |two lines| |information|
and my media query changes those two to

|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|

Answer

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.