I decided to modify a template included with Dreamweaver. Everything looks fine in design mode but when I load the page in Opera or Ie I see two problems. The containter div stops loading after the header instead of after the footer where it is supposed to stop. Also, the content starts after the sidebar instead of alongside it. There are other problems on the template, but I can fix those once I figure out what I did to the container and the content. The code still has all the annoying comments-sorry about that. I did not get a chance to clear it out.
My site is courtneyalsop.com. I'm just trying to make a very simple website and I thought I would try to modify a simple template. I've made my own before, but I wanted to try something differenet and I've mucked it up but I'm not sure how since it looks fine in design mode.
A few amends to the css:
1. Add - overflow: hidden; to the #container css (see below). This forces the 'container' to wrap itself around the floated <divs> inside it.
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
2. Remove the border declaration from the 'sidebar1' css or comment it out (as shown below). Or make the width of the 'sidebar1' <div> less than 20%. Why, because the border width gets added to the overall width of an element. So 20% plus border and 80% width of your 'content' <div> exceed 100%.
/*border: thin dashed #FF0;*/
3. Delete or comment out clear: both; from the 'content' css (see below). Decaring it will position the 'content' <div> under 'sidebar1', which is NOT what you require.
/* clear: both; */
Remove the first 2 css declartions from the 'footer' css, that's just complete rubbish or comment them out (as shown below). Add clear both; (as shown below). This will force the 'footer' to be postioned where you want it, after the other <divs>
/*position: relative;/* this gives IE6 hasLayout to properly clear */
/* clear: none; /* this clear property forces the .container to understand where the columns end and contain them */
border: thin dotted #FF0;
Europe, Middle East and Africa