CSS - How To Split/organise The Css?

for my website, i'm going to be using some css for every page in it, would it be advisable to store the css for each page in their own file? or even better in the actual page itself?
if i put it all into one css file i'll end up putting bit spacers:
/*-=-=-=-=-=-=---=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-*/
to block things apart

Floats always cause me some consternation. This one sort of works, except for the border and the padding/margin (which may be related to the border issue). I've only checked this on FF on a Mac so far, btw.

Right now the divs do float, but the left side of the border is a million miles away. Solving the border issue might take care of the padding/margin between #caravan and #rally (right now each tweak does nothing).

Also, is it possible to get the text at the end to flow under the property changes box? Probably not, as I set a width of 65%, but that was the only way I knew to get the two boxes to float up...I guess I'd have to make that last paragraph its own div to get the text to go all the way across?

The page I'm trying to figure out is here and the relevant CSS is

#caravantop {
background-color: #ffefca;
margin: 0;
padding: 1.2em 2% 0 2%;
}

#caravan {
float: left;
width: 63%;
background-color: #ffefca;
padding: 0;
margin: 0 2% 0 2%;
}

#rally1 {
padding-right: .1em;
border: 1.2px #775b36 solid;
margin-right: .5em;
margin-bottom: 1em;
}

#rally1 h4 {
margin-bottom: .6em;
}

#rally1 p {
font-size: .7em;
padding-bottom: 0;
margin: .6em;
}

#rally1 ul {
list-style-image: url(../images/icons10_webpage.gif);
list-style-type: circle;
text-decoration: none;
font-size: .7em;
margin-bottom: 1em;
margin-left: 2.5em; }

#rally1 li {
margin-bottom: .4em;
margin-left: 1.7em;
}

#rally1 li.lastli {
margin-bottom: 2.5em;
}

/*#rally1 ul.nohouse {
list-style-image: none;
list-style-type: none;
text-decoration: none;
font-size: .8em;
margin-bottom: .3em;
margin-left: 0;
}*/

#rally2 {
padding-right: .1em;
border: 1.2px #775b36 solid;
margin-right: .5em;
margin-bottom: 1em;
}

#rally2 h4 {
margin-bottom: .6em;
}

#rally2 p {
font-size: .7em;
padding-bottom: 0;
margin: .6em;
}

#rally2 ul {
list-style-image: url(../images/icons10_webpage.gif);
list-style-type: circle;
text-decoration: none;
font-size: .7em;
margin-bottom: 1em;
margin-left: 2.5em; }

#rally2 li {
margin-bottom: .4em;
margin-left: 1.7em;
}

#rally2 li.lastli {
margin-bottom: 2.5em;
}

I've started using a JavaScript carousel script on my website, http://www.rockitdesign.co.uk/new/. When I loaded the page in Firefox and safari every image in the carousel would appear and then all but the top would disappear which is how it should be.

Sorry for the bad explanation, any way to stop this?