Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed sidebar, fluid content area – equal heights and different backgrounds?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #40585
    apaunchev
    Participant

    I’m building a layout that has a fixed 300px wide sidebar on the left of the page and a content area to the right of it that doesn’t have a set width (so it’s fluid).

    I need both sections to have different background colours and have equal heights. An image-based method (such as the original faux columns method) is out of the picture, because the colours need to be customisable and I can’t generate a new image every time I need to change them.

    I am willing to use fancier CSS, as no support for IE7/8 is required. I’ve been looking for a proper technique, but unfortunately all I’ve tried so far doesn’t exactly achieve the effect I’m going for.

    I need some fresh ideas about how to approach this. Thanks!

    #113211
    Paulie_D
    Member

    The basic structure will be something like this until support for flexbox &/ore css-columns is deeper.

    http://codepen.io/Paulie-D/pen/kxvgn

    JS can deal with the equal heights or you could go with a gradient (left-right) to ‘fake’ columns.

    http://codepen.io/Paulie-D/pen/hifBg

    #113214
    wolfcry911
    Participant
    #113215
    Paulie_D
    Member

    @wolfcry911 Even better. :)

    Provided the sidebar is shorter than the content..no?

    #113222
    wolfcry911
    Participant

    @Paulie_D, if the sidebar were longer you would simply need to have the container div contain it (clearfix method, or perhaps a footer could clear it)
    http://codepen.io/wolfcry911/pen/ECynr

    #113243
    Paulie_D
    Member

    @wolfcry911 Perfect.

    #113259
    apaunchev
    Participant

    @wolfcry911, this is almost exactly what I need, the only problem is that I need to make sure the sidebar and content always span across the full height of the page, otherwise it’ll show the background of the body when the page is too short.

    Is there any way to avoid using JS for that? And if not, what is the best way to approach it (I’m using jQuery as well)? So far, I’ve only come up with this:

    http://codepen.io/apaunchev/pen/HkCnc

    #113271
    wolfcry911
    Participant
    #113302
    apaunchev
    Participant

    Thanks guys, that did the trick. It’s way simpler than I thought it would be…

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.