I have purchased a 'coded' template for my web site and I am having a little trouble - please can anyone help. I don't think it should be that difficult but its giving me a headache The site is Juniper Internet The problem I am having is I need the main content area to automatically resize so that no matter what the content is it fills the main area down to the footer. The page is coded in html. Any ideas please. Obviously any help will be appreciated and rep givien for the help provided. Cheers Hopper
A table is unnecessary, and offering to help people in exchange for compensation is flat out rude and unprofessional (another reason why I love SitePoint - you ask for help, and you'll get it without fear of getting the "robber baron" treatment). As it is in the OP's case, the code is rather messy and non-semantic, so I'd suggest a re-write. In the meantime, if you want to have equal height columns, I'd go with a background image on your #wrapper DIV to create a faux-column effect. I'll also show you how you can cut down on the code you're using to create the same effect with cleaner markup (and the freedom from JavaScript). Just let me take care of the other threads I need to go through first.
You should make those divs and make the background div, the one holding the left and the right, white. It will then fill in the rest on the right hand side.
Hi Dan, Thanks for that, I created a image 10px high x 1 wide and included it in the CSS file as the wrapper background image. This seems to have done the trick. Cheers Special thanks to all who offered help and advise, its much appreciated. Hopper
Ok, I have your HTML ready. Notice how lean it is. I decided to go with a 100% document height model (which I'll explain when I get around to writing the CSS and its associated post), so I ended up using not one but two non-semantic DIVs (ooh, arrest me officer for using non-semantic code ). The empty SPAN inside the H1 is for an image replacement technique I love to use, but other than that, the HTML's about as lean as you're going to get. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen" /> </head> <body> <div id="container"> <h1><span></span>Velizo Networks</h1> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Web Sites</a></li> <li><a href="#">Advertising</a></li> <li><a href="#">Contact</a></li> </ul> <div id="content"> <div class="section"> <h2>Welcome to the Velizo Network</h2> <p> xenon.com is a leading provider in dedicated servers. The owner, steve mannors, contact velizo for a fresh and modern website. This is what we produced. this is all dummy tecxt and will be replaced by some meaningful welcome to our network type content. Usually you will brag about what your company has to offer and what makes it unique. xenon.com is a leading provider in dedicated servers. The owner, steve mannors, contact website. This is what we produced. This is all dummy text and will be replaced by some meaningful welcome to our network type content. Usually you will brag about what your company has to offer and what makes it unique. xenon.com is a leading provider in dedicated servers. The owner, Steve Mannors, contacted velizo for a fresh and modern website. This is what we produced. This is all dummy tecxt and will be replaced by some meaningful welcome to our network type content. Usually you will brag about what your company has to offer and what makes it unique. </p> <div class="signature"> Mr.M.Surname </div> </div> <div class="section"> <h2>The Velizo Network</h2> <ul> <li>Lorem Ipsum Text</li> <li>Lorem Ipsum Text</li> <li>Lorem Ipsum Text</li> <li>Lorem Ipsum Text</li> </ul> </div> </div> <div id="sidebar"> <div class="section" id="latest-site"> <h2>Latest Web Site</h2> <p> xenon.com is a leading provider in dedicated servers. The owner, Steve Mannors, contact velizo for a fresh and modern website. This is what we produced. </p> <div> <a href="#">view project</a> </div> </div> <div class="section" id="latest-news"> <h2>Latest News</h2> <h3>09.07.05</h3> <p> xenon.com is a leading provider in dedicated servers. The owner, Steve Mannors, contact velizo for a fresh and modern website. This is what we produced. </p> <h3>09.07.05</h3> <p> xenon.com is a leading provider in dedicated servers. The owner, Steve Mannors, contact velizo for a fresh and modern website. This is what we produced. </p> </div> </div> <div id="clear-footer"></div> </div> <div id="footer"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Web Sites</a></li> <li><a href="#">Advertising</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html> Code (markup): Like I said, the CSS will be coming later. And I also suggest canning the footer menu, since it's not needed (a "return to top" link will do just as well). In its place, I suggest you put in a footer, which can be done by slapping a paragraph element without a class or ID (since the CSS will reference its parent element, the DIV with the ID of footer).