Grow your CSS skills. Land your dream job.

Fill or repeat y

  • # December 11, 2012 at 12:05 pm

    Hi,

    I’m not well versed in CSS so apolgies in advance.

    I am trying to create a two column layout where the sidebar colour or image will fill to the same height as the div to it’s right. The code [here might show it better than I can say it.](http://codepen.io/joe/details/bxraA “here might show it better than I can say it.”). I’d like the sidebar to be green as far as the content on the right. At the moment the background-color only covers the area where there are elements. I have tried a background-image and repeat but without luck. Can anyone offer any guidance?

    Thanks in advance.

    # December 11, 2012 at 12:12 pm

    Ahh…it’s an old problem which doesn’t quite have a proper solution just yet…but it’s coming.

    There are a variety of solutions (google ‘faux column’) and which one is best for you will depend on your particular needs and site.

    Applying the bg color to the container and specifying other colors for the content/footer etc. is a quick and dirty way…http://codepen.io/joe/pen/nDFkj

    Do you have an image of what the finished page is supposed to look like…it would help enormously?

    # December 11, 2012 at 4:49 pm

    Depending on the browser support you need you can use this technique: http://jsfiddle.net/joshnh/7sff8/

    It doesn’t work in IE 7 or below.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".