February 19, 200818 yr Hi everyone and please excuse my ignorance but I am designing a website for my village and I am having a display problem. The website is www.perranuthnoe.com and the problems are on the Notice Board page and the Amenities page. They display fine in IE but in Firefox the background ends halfway up the screen. Can anyone shed any light on what the problem is as I just can't suss it out. CSS is new to me. I am using a free CSS template and trying to work it out as I go. I have reverted to tables on the accommodation page as they seem to display right in both browsers! Any answers are very much appreciated.
February 19, 200818 yr I haven't looked at your CSS, but at first glance it looks like your 2 columns are using float left which is fine, but they need to be cleared for the surrounding div to continue to display. A simple work around for this type of problem is to put an empty div that is full width, with clear: left inside the div that is ending early, after the 2 floated columns.
February 19, 200818 yr Author I haven't looked at your CSS, but at first glance it looks like your 2 columns are using float left which is fine, but they need to be cleared for the surrounding div to continue to display. One uses a float left but the other one doesn't. style.css A simple work around for this type of problem is to put an empty div that is full width, with clear: left inside the div that is ending early, after the 2 floated columns. Forgive me but I do not know how to do this!
February 19, 200818 yr In your code you have: </div> </div> </div> <div id="footer"> I haven't traced all the divs back to their start tags, but i think you need to do something like this to stop the left floated div overlapping its container. </div><!--end of content_main div--> <div style="width: 740px; height: 10px; clear: both;"><!--clear--></div> </div> </div> <div id="footer"> If this doesn't work, then you may need to change content_main to a floating left div. Tuck
Create an account or sign in to comment