treehouse : what would you like to learn today?
Web Design Web Development iOS Development

two cloumn background problem

  • 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 :? :
    http://saheran.persiangig.com/err_screenshot.jpg

    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.)
  • 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
  • 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.
  • 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
  • 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.
  • html, body and the container must be 100% height as well. Can you show me your code it would be helpful as well
  • 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 1x800 image

    that can help, but ts not eh most ideal
  • It's not working too!
    Can I send you the whole code?
  • The concept of columns of equal height is presented here in a screencast:
    http://css-tricks.com/videos/css-tricks-video-5.php
  • Thanks Chris! I really appriciate it.
    Thank you.