Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Equal Height Columns with CSS only

Home Forums Support Equal Height Columns with CSS only

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #383234
    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!

    GeneratePress 1.4
    GP Premium 1.4.3
    #383273
    Leo
    Staff
    Customer Support

    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.

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

    #383291
    Leo
    Staff
    Customer Support

    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

    #383297
    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!

    #383559
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #383618
    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

    #383643
    Tom
    Lead Developer
    Lead Developer

    I’m glad I could help! Thank you 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.