I'm just starting to learn CSS, and I'm having some problems making the layout stick with all computers. My mac shows it one way, and my husband's PC shows it another. The site I'm working on is for a volunteer fire department, and they rely on the site for a few important things so I need help as soon as possible please.

The site address is http://www.slaughterfiredepartment.com and the site for the css is http://www.slaughterfiredepartment.com/svfd.css.

 

This is what the site is supposed to look like:

 

but on my husband's PC the column on the right shifts to the bottom. Grr! So if you could help that would be awesome.

You can email me at Monica Hughes.

you're using a lot of floats and not sure you're clearing them and that might be causing the problem. I've looked at the site in firefix and IE7 and it looks fine, but in IE the content shifts a little to the right.

you're using a lot of floats and not sure you're clearing them and that might be causing the problem. I've looked at the site in firefix and IE7 and it looks fine, but in IE the content shifts a little to the right.

 

clearing them? What do you mean? Like I said, I just started learning CSS.

well, everytime you use a float you need to clear it like this.

 

#left {
float:left;
clear:both;
}
#leftsomethingelse{
float:left;
CLEAR:LEFT;

 

Links:

http://www.w3schools.com/css/pr_class_clear.asp

Try this example http://www.w3schools.com/css/tryit.asp?fil...css_class-clear

well, everytime you use a float you need to clear it like this.

 

#left {
float:left;
clear:both;
}
#leftsomethingelse{
float:left;
CLEAR:LEFT;

 

Links:

http://www.w3schools.com/css/pr_class_clear.asp

Try this example http://www.w3schools.com/css/tryit.asp?fil...css_class-clear

 

Hmm.. I'm not sure how clear will help me. It seems like it voids the float.

Hmm.. I'm not sure how clear will help me. It seems like it voids the float.

 

 

Ok, so I think I figured out part of the problem. I made my frame 800 px and then my 3 div's inside the frame added up to 804 including padding and stuff. So it looks alright in the firefox browser, but in explorer it still shifts everything to the right. Any ideas what's causing that?

IE adds about 10px of padding and/or margin to some elements on screen. Two options to try therefore:

 

1) Add the Holly Hack into you stylesheet:

 

* { margin:0; padding: 0;}

 

2) Make the 800px element slightly thinner.

IE adds about 10px of padding and/or margin to some elements on screen. Two options to try therefore:

 

1) Add the Holly Hack into you stylesheet:

 

* { margin:0; padding: 0;}

 

2) Make the 800px element slightly thinner.

 

 

Awesome! Thank you so much. I'll try that.

Awesome! Thank you so much. I'll try that.

 

So I figured everything out! Thank you all so much for everything! You're all absolutely awesome!