I have a problem. I need to fill some space, under my menubar on my website. (See the posted pic) I can fill it, if I put in for example: #leftcolumn { height: 100px; } But if a put in: #leftcolumn { height: 100%; } Nothing happens. I have tried different stuff, for 4 days now, but nothing is working. This is my first time building a website. Can anybody help me?
height: 100% doesn't work. To have a 100% sidebar you need to play with background images you create the illusion of a full height column
Install another "div", similar to a wrapper. Make the background color white or give it a white background image that tiles to cover whatever part it is you need.
My wrapper only works with: wrapper { height: 1500px } It does not work with % Am i missing a code or something?
Did that work for you ? If you do not want to put a link here to your site, I understand. ( If it is an adult topic or something. )
What wechito is suggesting is that you make Faux Columns. It's an easy way to get equal-height columns without using Javascript.
I tried and i see the idear of the Faux Columns. But i still have the same problem... The #fix wont go to the bottom of the page. CSS: #wrapper { margin: 0 auto; width: 970px; } #fix { width: 970px; background-image:url(../images/fix.gif); background-repeat: repeat-y; } HTML: <div id="wrapper"> <div id="fix"> (THE PAGE) </div> </div> If i use height: 1500px; like in the example in the bottom - Then i see it. I need non fixed size, that follow the rest of the page, like in the image i posted. #fix { width: 970px; background-image:url(../images/fix.gif); background-repeat: repeat-y; height: 1500px; }
I solved the problem: CSS: html { background-color: #333; height: 100%; <--- } body { background-color: blue; width: 770px; margin: 0 auto; min-height: 100%; <--- } HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>StortSmil.dk</title> <link rel="stylesheet" type="text/css" href="css/css.css" /> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> <div id="wrapper"> </div> </body> Thank's to all of you, for your time.