Grow your CSS skills. Land your dream job.

two cloumn background problem

  • # November 12, 2008 at 8:59 am

    In many designs, we have two column. One for main content and the other is for sidebar. So, I float one to the right and the other to the left. Imagine that we apply a background to them. The problem is here that the height of main_content and the height of sidebar is not equal. My english is not good so see this as an example :? :
    [img]http://saheran.persiangig.com/err_screenshot.jpg[/img]

    In css2 the display:table technique can solve this but it’s not supported by IE less than 8. :(
    (sorry. I know it’s a very simple question but I didn’t know what should I search in the internet to find the answer. and, sorry for my English.)

    # November 12, 2008 at 10:44 am

    I think you want to add top:?px; in your sidebar.

    ? being any pixel size you want
    e.g.
    top:10px;
    top:25px;

    but set it the same as your main content

    # November 13, 2008 at 7:41 am

    The problem is that I don’t know how much the height of main_content would be. It depends on how much content will be there. If the content in main_content be more than the sidebar, the sidebar background doesn’t apply.

    # November 13, 2008 at 9:34 am

    Cool I’ve been working on something for my splash page, same sorta concept.
    This should sort you out:
    http://johnsbeharry.com/lab/code/bottom-footer.html

    # November 15, 2008 at 8:30 am

    it’s not working… give them height: 100%;
    Here, I want to make the two floated elements to have equal height. how to do this? when their content is not enough to be make the height equal.

    # November 15, 2008 at 8:52 am

    html, body and the container must be 100% height as well. Can you show me your code it would be helpful as well

    # November 16, 2008 at 10:03 am

    quickly:

    make an image say 1hx800width repeat vertically
    e.g: 550px white 250px blue set this as the background for the container div then have your other divs float left and right, the left one with another image as background which should sit on to of the 1×800 image

    that can help, but ts not eh most ideal

    # November 20, 2008 at 10:18 am

    It’s not working too!
    Can I send you the whole code?

    # November 20, 2008 at 10:34 am

    The concept of columns of equal height is presented here in a screencast:
    http://css-tricks.com/videos/css-tricks-video-5.php

    # November 22, 2008 at 9:16 am

    Thanks Chris! I really appriciate it.
    Thank you.

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

You must be logged in to reply to this topic.

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