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!
@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
@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:
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!
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
http://codepen.io/wolfcry911/pen/bJCfl
@wolfcry911 Even better. :)
Provided the sidebar is shorter than the content..no?
I'm using the holy grail in word press. That puts the content first and the side bars I have at a fixed width, and the content is flexible.
@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
@wolfcry911 Perfect.
@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
Is this what you after? http://codepen.io/anon/pen/ksrEH
http://codepen.io/wolfcry911/pen/bJCfl
updated
Thanks guys, that did the trick. It's way simpler than I thought it would be...