http://www.fcbs.co.uk/test2.html In the bottom of my left content the last image is sitting out of the div. Can anyone please come up with a solution. My css code is at http://www.fcbs.co.uk/test2.css Kind Regards
Well, the good news is your HTML is valid. Bloated, but valid. The bad news is your CSS could be a lot better. You have some unneeded HTML code in your page; that's the first place I would start. Try this HTML out, and then use floats to position your columns: <body> <h1><span></span>Your Web Page (or site) Title</h1> <form name="jump" action="null" id="jump"> <select name="menu" class="sitemaps" onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;"> <option value="" selected="selected">---Quick Select---</option> <option value="http://www.fcbs.co.uk">FCBS Homepage</option> <option value="http://www.fcbs.co.uk/about_first_class.asp">About FCBS</option> <option value="http://www.fcbs.co.uk/first_class_copier_history.asp">Copier History</option> <option value="http://www.fcbs.co.uk/first_class_services.asp">Maintenance Service</option> <option value="http://www.fcbs.co.uk/first_class_products_supplies.asp">Office Equipment</option> <option value="http://www.fcbs.co.uk/first_class_online_catalogue.asp">Products Catalogue</option> <option value="http://www.fcbs.co.uk/first_class_konica_minolta.asp">Konica Minolta</option> <option value="http://www.fcbs.co.uk/first_class_infotec.asp">Infotec</option> <option value="http://www.fcbs.co.uk/first-class-brother-printers.asp">Brother</option> <option value="http://www.fcbs.co.uk/first-class-toshiba-copiers.asp">Toshiba</option> <option value="http://www.fcbs.co.uk/first_class_Consumables.asp">Office Supplies</option> <option value="http://www.fcbs.co.uk/first_class_buyers_guide.asp">Copier Buyer Guide</option> <option value="http://www.fcbs.co.uk/first_class_quote.asp">Quote Request</option> <option value="http://www.fcbs.co.uk/first_class_upgrade.asp">Copier Exchange</option> <option value="http://www.fcbs.co.uk/first_class_case_studies.asp">Case Studies</option> <option value="http://www.fcbs.co.uk/first_class_recruitment.asp">Job Opportunities</option> <option value="http://www.fcbs.co.uk/first_class_sharp_mx.asp">Sharp MX</option> <option value="http://www.fcbs.co.uk/contact_first_class.asp">Contact FCBS</option> <option value="http://www.fcbs.co.uk/first_class_privacy_policy.asp">Privacy Policy</option> <option value="http://www.fcbs.co.uk/first_class_local_links.asp">External Links</option> </select> </form> <div id="sidebar1"> <ul id="main-menu"> <li><a href="http://www.fcbs.co.uk" title="Homepage">Homepage</a></li> <li><a href="http://www.fcbs.co.uk/about_first_class.asp" title="About First Class Business Solutions">About Us</a></li> <li><a href="http://www.fcbs.co.uk/first_class_services.asp" title="Customer Service and Support">Customer Service</a></li> <li><a href="http://www.fcbs.co.uk/first_class_products_supplies.asp" title="Products and Equipment">Office Products</a></li> <li><a href="http://www.fcbs.co.uk/first_class_consumables.asp" title="Consumables and Supplies">Consumables</a></li> <li><a href="http://www.fcbs.co.uk/first_class_online_catalogue.asp" title="Online Catalogue">Online Catalogue</a></li> <li><a href="http://www.fcbs.co.uk/first_class_buyers_guide.asp" title="Buyer Guide">Buyer Guide</a></li> <li><a href="http://www.fcbs.co.uk/first_class_quote.asp" title="Free Quotation">Free Quote</a></li> <li><a href="http://www.fcbs.co.uk/first_class_upgrade.asp" title="Upgrade Leasing and Exchange Equipment">Equipment Leasing</a></li> <li><a href="http://www.fcbs.co.uk/first_class_case_studies.asp" title="Case Studies">Case Studies</a></li> <li><a href="http://www.fcbs.co.uk/first_class_recruitment.asp" title="Recruitment">Recruitment</a></li> <li><a href="http://www.fcbs.co.uk/contact_first_class.asp" title="Contact FCBS">Contact Us</a></li> </ul> <div id="ad-banners"> <span id="sharpcentre"></span> <span id="brands"></span> <span id="investorinpeople"></span> </div> </div> <div id="content"> <h2>Main Content Heading</h2> <p>Content Goes Here</p> </div> <div id="footer"> <p>Footer Goes here</p> </div> </body> Code (markup): I used an extra SPAN inside the header so you can assign a background image to it and then position the background above the text to hide it. About the only thing I would use positioning for would be the form on your page. I'd set the position of that to absolute, and then set it in the upper right hand corner, like you have now, plus a z-index higher than the span. The rest of the page would be laid out using floats (float your left column, give it a width, then let the content ride alongisde that; clear the footer using clear: left; and you're done). If you want, I can write up the CSS code that you'd need to do this, but there will be a condition to it. All you'd have to do in return is help someone else .
Thanks Dan. That would be great if you could do that for me. I will always try and help other people. Help on here is much appreciated. Kind Regards
Ok, I had to run out today, and with the snow falling like it has, I wasn't able to get back on until late, and when I did, I ended up checking other sites. I'll get back to you in the morning, before I write my article for www.search-this.com (need to write it, or else I'll be lynched) .
Thanks. I am a bit unsure on the css code for: <div id="ad-banners"> <span id="sharpcentre"></span> <span id="brands"></span> <span id="investorinpeople"></span> </div> Do i use a position: absolute; in the ad banners. In some of my pages throughout the website the centre content (right of the navcontainer) will have more content, so i want the left container's height to spread down with it. Hope this makes sence. Like it is doing with the current code of my website pages i.e www.fcbs.co.uk/index.asp and www.fcbs.co.uk/first_class_konica_minolta.asp Regards