1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Basic Assistance!

Discussion in 'CSS' started by noobie2shoes, Oct 8, 2008.

  1. #1
    Hi all,

    I have a basic question regarding this website:

    http://www.peakhurstgardencentre.com.au/?page_id=5

    I was wondering how to (using CSS) make the background of the sidebar extend 100% down the page (as you can see the sidebar right stop 2 cms from the bottom and leaves a white area just below:

    Garden hints and tips section on the right!

    I can extend via using text or <br> in the html but that aint as clean.

    Should I use something like this: background-repeat: repeat-y;
    SEMrush
    This is the current CSS below:

    #sidebar {
            background: #DEE3A6;
    	float: right;
    	width: 230px;
    	margin: 0px;
    	padding: 10px 0px 20px 0px;
    	line-height: 20px;
    	display: inline;
    Code (markup):
    Hope someone can help me :D:D
     
    noobie2shoes, Oct 8, 2008 IP
    SEMrush
  2. noobie2shoes

    noobie2shoes Peon

    Messages:
    704
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Anyone know?

    Or perhaps I didnt explain it properly...please let me know if what I am saying doesnt make sense lol
     
    noobie2shoes, Oct 8, 2008 IP
  3. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #3
    It makes sense. Search for faux columns is the best advice I can give you. background-repeat is for images, what you need is for the two columns (content and sidebar) to be the same length. You might be able to set the height of the sidebar to 100% but I didn't look over the layout in enough detail to state that with certainty. If there is a div defined that contains only the left content area and the sidebar, height: 100% should work.
     
    shallowink, Oct 8, 2008 IP
  4. noobie2shoes

    noobie2shoes Peon

    Messages:
    704
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yup, There are two different divs for the left content and right sidebar.

    So just enter this?

    height: 100%; into the css?
     
    noobie2shoes, Oct 8, 2008 IP
  5. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #5
    There has to be 3 divs. Left content, right sidebar and one holding both of those. The height:100% is applied to the sidebar css.
     
    shallowink, Oct 8, 2008 IP
  6. noobie2shoes

    noobie2shoes Peon

    Messages:
    704
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I tried applying to just the sidebar css but to no avail.

    It seems like such a common problem and people are asking it in google search results but the answer is varied and doesnt seem to work :(
     
    noobie2shoes, Oct 8, 2008 IP
  7. coldclimber

    coldclimber Peon

    Messages:
    266
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Unlike tables div's do not automaticly expand with the rest of the page and will only go as far down as the content within them.

    You could just add a couple of blank returns under the text to push it down, or set that column to be a minimum height. ie min-height: 500px
     
    coldclimber, Oct 9, 2008 IP
  8. karmik

    karmik Peon

    Messages:
    330
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #8
    The permanent solution for this problem would be to have a thin background image running across the body center in Y axis. Else there will always be min-height problem with IE. However if you would like to use min-height for it then do it like this:

     
    karmik, Oct 10, 2008 IP