SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2002
    0 Post(s)
    0 Thread(s)

    CSS Positioning Problem

    Please visit -

    My code is valid XHTML 1.0 and valid CSS.

    There is a problem: There is no white background on the left side (bottom). How can I create one that's going to be as big as it needs to meet the right side of the page? I cannot set a specific size becuse the bigger the text on the right side will be, the longer the left side box needs to be.


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    As you have absolutely positioned nearly everything on your page you will find it difficult to allow any elements to interact with any other.

    So the easiest solution for you is simply to use a background image in the body that repeats down the y-axis. The image needs to be as wide as the columns and you just place it as follows.
    body {background: url(bg.gif) repeat-y 50px 0px;}
    Now assuming that you always want the background to go to the bottom of the page this method is simple and efficient.

    Make your bg gif as wide as the column and about 5px high so that it draws quicker. You can even just make the image pure white to match the background of the main content or you could add a nice screen fade if you wanted.

    Also note that your page doesn't display in mozilla because you have set a height on your H1AZ 06 element and your content is greater than the height. Just take the height out altogether and let the element expand naturally.

    Hope that helps.



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts