[Solved] how to set background of div to span entire height

Google "faux columns"

cheers,

gary

Hi Gary,

Thanks for your reply. I looked up faux columns, and I tried playing with the background repeat of the css for my div, but still no luck. Here is the related css code:

#main { width: 97.6%; height: 100%; float: left; padding: 20px 0 10px; margin: 0 10px 0 10px; background-color: white; background-repeat: repeat-y !important; }

I know that some of this css works, because if i change the background color, i see the change in my webpage...the width works as expected, I just cant get the height of the column to extend all the way to the bottom of the page.

The design of my webpage is a single column (i.e. the column I am having trouble with is the only one in question).

I took an old template, and I am trying to modify it for my needs...I can put what I have online if that helps.

Thanks!

hi,

this is just a guess, but did you try adding overflow:hidden to your main div?

mihir

Read the article again. It requires a background image.

cheers,

gary

sorry to keep bugging you about this, I tried the same thing with an image, and I got the same results.

I have posted a very simplified version of what I am attempting: http://test.lambandtunafish.com/

and the css file can be found here: http://test.lambandtunafish.com/style.css

In the example I put online, I intentionally picked a picture that doesnt look right (they are little white page icons), so I could see the effect the repeat was having.

I keep getting the feeling that it is something small and stupid which I am missing...but alas, this is all very new to me.

Thanks!

did you mean repeat-x????

you have written repeat-y... and it is repeating it.

mihir

And did you try removing the repeat??

why do you need one??

when i remove the repeat, it works nicely...

mihir

Essentially, I want it to repeat in both directions, but I want the repeat to go all the way to the end of the page (i.e. a white stripe where the content is going down the entire page). However, when I view it in firefox, it only repeats about halfway down the screen.

Hi,

Remove the background repeat property. That will work.

mihir

I removed the repeat, and now the css looks like:

#main { /* my changes */ width: 97.6%; float: left; padding: 20px 0 10px; margin: 0 10px 0 10px; background: url('images/page_white.png'); }

however, the image does not repeat all the way down the entire page (I have updated the online version http://test.lambandtunafish.com/)

It is expanding till the text, and that is how it will be.

mihir.

I believe that Gary's comment about faux columns is a trick that can make the background column expand all the way, unfortunately, i cant seem to get it to work.

This elementary CSS rule is added to the body element:

You seem to have skipped over that part.

...and validate your code!

...and clean your room!

...brush your teeth!

thanks for clearing that up...I think I seem to have got it...took some moving around of the css code...and I still need to create a white image for the background, but I think I got it....thanks again!

Would you like to post your latest code for us to have a quick look through, make sure it's all done right? Faux columns can be tricky to get to grips with

Sure, here are the main css portions:

body {
font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #444;
background: #9b9b9b url('images/body_bg_785.png') repeat-y top center;
text-align: center;
margin: 0px;
}

#header {
height: 150px;
color: #fff;
background: #333 url('images/header_bg_785.gif') repeat-y top center;
text-align: left;
width: 784px; /* change back to 785 to widen */
margin: -150px auto;
}

#main {
width: 97.6%;
float: left;
padding: 20px 0 10px;
margin: 0 10px 0 10px;
}

You can see it in action here: http://test.lambandtunafish.com

thanks!

Little bit of divitis and classitis but looking good

yea, I figured I am probably not following the best html guidelines, but I just wanted to get it working for now.

Thanks again!