I can't get my sections to align correctly

[AnthonyJ]

Hello out there,

 

Can you guys look at this code and show me where I went wrong. you will see at the top of the page I want the site title just below the grey outer shell.

 

I attached the files below.

arj_help.html

arj_help.css

[Wickham]

Add

.container { padding-top: 10px; }

to the css file. I have a suspicion that margin-collapse is having an effect from the h1 and causing the problem but I haven't tested any further as the .container class makes the space in Firefox.

 

IE 9 doesn't show any header backgrounds so the page looks terrible. IE9 doesn't process the header background gradient and IE6 to IE8 don't process the border-radius. See http://www.findmebyip.com/litmus/

 

For IE9 to show a background add a plain background-color and border-radius after the styles for linear-gradient and gradient with the browser prefixes.

 

.container { padding-top: 10px; } /*added style*/

header
{
padding-top: 20px;  margin-top: 20px; 
color: #fff;
text-align:center;
font-size: 24px;
height: 80px;
width: 900px;
background: -moz-linear-gradient(
				center top,
				rgb(12,12,50) 0%,
				rgb(120,120,160) 100%
			);
			background:
				-webkit-gradient(
					linear,
					right top,
					right bottom,
					color-stop

(0,rgb(12,12,50)),
					color-stop

(1,rgb(120,120,160))
				);

-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
background-color: #ccc; border-radius:  12px 12px 12px 12px; /*added styles for IE9*/
}

which shows color with border-radius in IE9 but no radius in IE6 to IE8, or use javascript for IE rounded corners.

[virtual]

Take the width off your body tag.

On section tag replace margin-left: 120px with margin: 0 auto.

Define .container in your css, give it width of 900px and center it with margin: 0 auto, then push it down into the container with padding-top: 20px.

 

Not sure if that is the look you want.

[AnthonyJ]

No that is not quite what I was after but you gave me an idea...

How would I go about doing this?...First take a look at the site currently with attached files.

Let's say that I add three more colors to the right of the grey container. So I would have the white container with the content, then the grey then say..red, yellow, and green ( not that I would use those colors but for arguments sake). Now I want the pages in my nav bar to be one of those colors. How would I stagger those containers and when you click on the nav bar the appropriate page comes the fore-front?

 

Make sense?

helpme.css

helpme.html