[Resolved] Equal Height Columns with CSS only

[Stephan]

Hey there 🙂

I’m trying to get my sidebar in line with my main content window but it seems that the fix I tried to do with tables and table-cells doesn’t work. Could anyone tell me why that is? I don’t want to use a script for this fix but only CSS, as I think it loads just a tad quicker and is completely stealth.

xxx is the site. Any help is dearly appreciated!

[Leo]

Hi there,

The sidebar is inline to me? https://s26.postimg.org/eljo3doll/2017-09-11_0859.png

It should be by default. Let me know.

[Stephan]

Hi Leo,

thanks for the super fast help. It seems I put this wrongly. What I meant was that I would like to have the sidebar be the same height as the main content window. There is the whitespace below the navigation that I want to have filled out by having the sidebar extend all the way down.

I try to keep the site neat, so I would love to solve this via CSS only. Do you think you can help me out here?

Thanks a lot,
Steph

[Leo]

Hmm I don’t think CSS only solution is possible.

Tom provided a solution here: https://generatepress.com/forums/topic/equal-length-columns/page/2/#post-38550

[Stephan]

Hey Leo,

could you maybe elaborate why this is? I have a very similar site with the table fix running and I’m pretty sure I put all the data correctly into the CSS code (it’s on the same site and already live) but it seems something is just not in place or GeneratePress doesn’t allow for this for some reason. If at all possible, I would really not want to let a script do this job, especially since I see the code itself working fine on my other site.

Sorry to be a pain in the rear-side!

[Tom]

You should be able to use the table fix with GP, you’re just missing the float: none parts of your CSS.

Once you do that, you should be able to color in the sidebar:

.inside-left-sidebar {
    background-color: #222222;
}

[Stephan]

Thanks Tom!

I applied this and finally it works. I didn’t know the float rule was important for this fix, but I very well know better now and have learned for the rest of the GP pages that are yet to come 😀

MUCH MUCH appreciated, I’ll fire a coffee over for you guys when I’m not broke anymore!

All the best,
Steph

[Tom]

I’m glad I could help! Thank you 🙂

[Author]

Posts