Hello! I am currently designing a website. It's the first time I've done anything like this for a good few years and the first time I've used CSS which is very easy thus far until I've tried to centrally align some <div> blocks! I've already looked all over the internet, read about 40 existing threads and tried every suggestion I've seen but with no luck. Also many of the suggestions deal with old browsers; I have Firefox 3 and IE 7 although obviously I would like my website to work in all browsers!!
Basically, I want my whole website to be horizontally centred. As you can see below I am at the very start of the design process and simply want my header block and my navigation menu block to be centrally aligned. I tried putting margin-left: auto and margin-right: auto tags for each of these two blocks but that did nothing and they stayed firmly rooted to the left of the screen.
I now have added these to <body> and put its width as 800px even though I want the grey background to fill all visible space, not just 800px wide. My current code then is as follows:
Now when viewed in Firefox 3, the #header is centrally aligned but the #navigation is not. Its left hand side is directly in line with the left hand side of the header but as it is only 700px and not 800px this means it is not truly centered, just directly below the header with a 100px gap on the right hand side. How can I correct this?!
Even worse is when I open this page on IE7 it doesn't do anything at all - everything is just bang on the left side of the page. I've tried the text-align trick but that did nothing in Firefox and completely messed the page up in IE adding in a horizontal scroll bar for some reason!!
Hi coothead, thanks for the welcome and thanks for your help!
I pasted that dtd (something else I'm entirely new to!) at the very top of my html document and it's definitely solved part of my problem. Using the CSS in my original post above, the header is now centrally aligned in both IE and Firefox but the Navigation box is not in either - it's directly below the Header but not centrally aligned.
I have included a photo to make it easier to see what I'm probably not explaining very well!