TF
0
How to create a two column with equal height?
I've been trying to create a two column layout with equal heights but to alos include a divider rule between both sides. Has anyone been able to create one that works across most/all clients? I need the bg color to both sides to extend equal height no matter the amount of content to each. Example attached.
Hey Tony,
Looks like your image isn't working, but I'm hoping this quick example will help.
I've repurposed another example I coded for someone, but take note of the <th> tags with the class "block".
Essentially, I'm utilising the natural table columns behaviour to equal the height of sibling columns.
Typically with tables we use the structure table>tr>td. However, the <th> tag is an alternative to the <td>. It has the same properties apart from bolding any text inside of it which can easily be fixed by setting your own font weight.
So for this example we use the structure table>tr>th, only for the outer columns.
Just to note, this is only if you're intending on your template being mobile responsive. If it isn't, remove the class "block" and change the <th>s to <td>s.
Example on Codepen - https://codepen.io/Digital_Frankenstein/pen/GRErmMd
thank you Niven for your response. The only issue I'm across with this is when I add in additional content to the left column paragraph it extends out the column to accommodate the added text. Doesn't retain the width to both columns if additional content is added to either side.
Simple, add a width to both <th> tags.
I've updated the Codepen example with this in mind.
thanks again Niven. I appreciate your assist, it now works for me. Makes sense adding a fixed width to each of the <th> tags.
Nice one! Glad I could help :)
With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.
PrepaidCardStatus
Hi there, if you could provide a code snippet for the OP to get their head around that solution, that would be really helpful.
CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements
Hi there, if you could provide a code snippet for the OP to get their head around that solution, that would be really helpful.
Hi there, if you could provide a code snippet for the OP to get their head around that solution, that would be really helpful.
https://www.mybalancenow.buzz/