Faux Column Madness with a pseudo element

[pkinchla]

Hello. So I have two columns in which I need to replicate faux columns. The catch is I need to have a pseudo element on the first column. Apparently absolutely positioning a pseudo element on a element that is set to display: table-cell is a not going to fly. My code works in the ever forgiving webkit but gecko says not so fast. here is a pen with my code. Any help is much appreciated.

http://codepen.io/wbp-paulk/pen/JbgDp

[paulob]

Hi,

For best results you would need to add an inner div into the cell and give that position:relative to do this properly although the padding on the cell will confuse things so its best to put the padding on the inner div instead to avoid rounding errors.

http://codepen.io/paulobrien/full/BajtA

You could do something without the extra div but it suffers from a pixel jog in Firefox. Instead of absolutely positioning the arrow you could float it with a negative margin which will effectively remove it from the flow but you will need to float one arrow from the left column and one arrow from the right column.

e.g.
.col-1:before, .col-2:before {
border:solid transparent;
content:””;
height:0;
width:0;
pointer-events:none;
float:right;
z-index:2;
position:relative;
}
.col-1:before {
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #f2f7fa;
border-style: solid;
border-width: 21px 0 21px 23px;
margin: 27px -4.4em 0 0;
z-index:3;
}
.col-2:before {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #c1c1c2;
border-style: solid;
border-width: 22px 0 22px 24px;
margin: 26px 0 0 -3.05em;
float:left;
}

It suffers from a pixel jog in Firefox hence the increase in size to cover the border.

You could also use the before and after elements on the h4 element instead but again suffers from a more uneven pixel jog in firefox.

You can’t absolutely place from table-cells as that is not defined in the specs so should be avoided as it is not supported by most browsers anyway. It is possible to absolutely place from the display:table element itself but that won’t really help as the cell size will not keep track with the percentage position via the parent and the arrow will be misplaced.

[pkinchla]

Thanks for the helpful solutions!
I updated the original pen with a background gradient on .table-block . Its a little bit more css but allows the columns to behave how they should with the media queries I have in place.

http://codepen.io/wbp-paulk/pen/JbgDp

paulob I totally agree about the table-cell issue. When I tested it in Firefox I said to myself that this totally makes sense. I very rarely use display:table-cell and when I do it always feels wrong. Thank god for firefox!

[paulob]

Both those examples are not as robust as the table-cell method I posted in that in the latter method you get column drop at small widths and overlap of the text in the first column.

The former example loses the background if the left column is taller and can’t really be relied upon as content may change.

I realise that you could use media queries to avoid the small screen width issues but I would have gone with the more robust approach of an extra div :)

[pkinchla]

So the project that this is for is a responsive site and both columns display block by default. I only add the floats and the pseudo element at a min-width of 900px. So it’s all good in this particular instance.

[paulob]

Ok, no worries :)

[pkinchla]

Thanks for taking the time to help :)

[Author]

Posts