Need help with simple design

Hi.

Can you guys please help me with a simple design?
I am having a few problems with my Pontiac Grand Am resource site.

How can I make the content not go to the left underneath the menu here:
http://www.grandayum.com/grand-am-videos.html

I'd like it to just stay where it is at the top and just continue down.
Also, how can I go about making the footer div center? I tried doing margins...but it's always off if I try to get it to the center.

I had to narrow the site's body width to 95% because when I set it to 100%, for some reason, it went more than that by like 10px to the right causing the browser to be able to scroll to the right.

These are all problems in my CSS file. Please view source and help.
Thanks.

 

If you do the margins left and right in percentages, it should be symmetrical and therefor centered.
You should start with having a div around the whole content.
Something like:

<div id="main">content etc.</div>

Code (markup):

Then you can center the div by doing the margins & padding for that in percentages. Set the margins and padding of body & html at zero.

 

footer u can center with margins like this:
firs delete margin-top and margin-bottom, then add this line:
margin: 100px auto 5px;
you can give class on your problematic form like this:
<form class="last" name="f" method="get" action="http://www.google.com/videosearch">
<input class="videos" type="text" tabindex="1" value="Pontiac Grand Am Commercial" name="q"/>
<input class="search" type="submit" value="Search" tabindex="2"/>
</form>
then u add in dark.css:
form.last{
margin-left:200px;
}

 

Do you guys think I should just use a table for the content then? So it won't go to the left underneath the menu div at all?

 

i think is not good to use table for layout, tables are for use when u need a real table not for page design.Use css for that.
add one more div in html:

<div id="content">
<div id="menu">
Main Menu
<br/>
<a href="index.html" title="Pontiac Grand Am Owners Resource">Home Page</a>
<br/>
<a href="grand-am-information.html" title="Pontiac Grand Am Information">Grand Am Info</a>
<br/>
<a href="grand-am-videos.html" title="Pontiac Grand Am Videos">Grand Am Vids</a>
<br/>
<a href="grand-am-appearance-modifications.html" title="Pontiac Grand Am Appearance Modifications">Appearance Mods</a>
<br/>
<a href="grand-am-performance-modifications.html" title="Pontiac Grand Am Performance Modifications">Performance Mods</a>
<br/>
<br/>
Appearance Mods
<br/>
<br/>
<br/>
Performance Mods
<br/>
<a href="grand-am-62mm-throttle-body.html" title="62mm Throttle Body for the Pontiac Grand Am">Throttle Body</a>
<br/>
<a href="grand-am-cold-air-intake.html" title="Cold Air Intake Systems for the Pontiac Grand Am">Cold Air Intake</a>
<br/>
<br/>
<br/>
</div>
<div id="main_content">
<h2>Pontiac Grand Am Videos</h2>
<p>Videos of Pontiac Grand Am vehicles uploaded by Google Video and YouTube users.</p>
<h3>Pontiac Grand Am Racing</h3>
<p>Videos of Pontiac Grand Am drivers racing.</p>
<form action="http://www.google.com/videosearch" method="get" name="f">
</form>
<br/>
<strong>Pontiac Grand Am Burnouts</strong>
<br/>
<p>Foolish Pontiac Grand Am drivers burning out their tires.</p>
<form action="http://www.google.com/videosearch" method="get" name="f">
</form>
<h4>Pontiac Grand Am Commercials</h4>
<p>Old-school commercials of Pontiac Grand Am vehicles.</p>
<form action="http://www.google.com/videosearch" method="get" name="f">
</form>
</div>
<div id="footing">.......

then u need to add in dark.css:
#main_content {
float:left;
}
#footing {
background-color:#666666;
border:1px solid #DCDCDC;
clear:both;
float:left;
font-size:12px;
margin-bottom:5px;
margin-top:100px;
padding:10px;
text-align:center;
width:100%;
}