I have been messing around with it for the last two days and have grown VERY frusterated (I'm pulling my hair out over here haha).


What I need:


I need to center my header image which I have successfully done.

I need for under my image there to be two div layers floated next to each other. \

The problem I am running into is : My image is 690 pixels wide - The "column like section" isn't 650 pixels. When I put my div layer columns directly under the layer my header images sit in, it centers the columns so that it is to the left of where it should be. I want it to look like the lighter grey section continues flush with the image.

I am sure my code isn't the way it should be, but that is why I am here. I have tried every thing I know to do and am at my wits end.

I know I am confusing all of you, so I have constructed an image screen shot of what I am trying to acheive. http://premierautosource.com/images/screenshot.jpg

Thanks for your help.

I can't really read the text. Can you put it in white? It'd make everyone's life a lot easier.

Can you post your CSS and HTML so we can get a look at what you have so far?

OK i updated my screen shot and have posted my css file here.
I meet with him on Sunday afternoon and need to have everything aligned and in good order. PLEASE HELP ME- I AM going crazy over here.


THE actual file where I'm building everything is Premier Auto Source Inc. if you need to see my source, but here is my css file. Thanks to anyone that takes the time to help me get back on track.



body {background-color: #0d0c0c; font-size:11px; font-family: Lucida Sans Unicode, Verdana, sans-serif; color:#000000;
}


div#outer {
position: absolute;
left: 50%;
width: 690px;
background-color:#0d0c0c;
margin-top:50px;
margin-bottom: 0px;
margin-left: -345px;
margin-right: 0;
padding:0px;
border:0;
}

div#middletop {
position: absolute;
left:50%;
width: 650px;
margin-top:0px;
margin-bottom: 0px;
margin-left: -325px;
margin-right: 0px;
padding:0px;
border:0;

}

div#rightcolumn {
width:199px;
margin-top:0px;
background-color:#2c2827;
float: right;
padding:10px;
border-right:15px;
border-color:#ffffff;
text-align: left;


}

div#leftcolumn {
width:405px;
background-color:#2c2827;
padding:10px;
margin-top:0px;
float: left;
text-align: left;
}

Dump the position: absolute for starters. That takes those boxes OUT of the document flow and you want to USE the document flow. Absolute positioning for everything simply is not necessary.

Take the text out of your graphic and use an unordered list for your menu. It will be easier to maintain and makes it accessible.

This works to do what you want:

body {
background-color: #0d0c0c;
font: 101% "Lucida Sans Unicode", Verdana, sans-serif;
color: #fff;
margin: 0;
padding: 0;
}

#container{
position: relative;
text-align: center;
color: #fff;

}
div#outer {
width: 690px;
background-color:#0d0c0c;
margin: 0 auto;
padding:0;
/*border:0;*/
text-align: left;
font-size: 70%;
}

#header{
height: 249px;
width: 690px;
margin: 0;
padding: 0;
/*border: 1px solid white;*/

}
#header1{
background: url(map.jpg) no-repeat;
height: 86px;
}

#header2{
background: url(top.jpg) no-repeat;
height: 163px;
padding: 0;
}

#header1 ul{
margin: 0px 0px 0px 8px;
padding-top: 60px;
list-style: none;
font-size: 125%;
font-weight: bold;
color: #fff;

}

#header1 li{
display: inline;
margin-right: 8px;
}


#middletop {
width: 650px;
margin: 0 auto;
padding:0px;
/*border:0; */
border: 1px dotted green;

}

#rightcolumn {
/*width:199px; */
margin: 0 0 0 450px;
margin-top:0px;
background-color:#2c2827;

/*float: right; */
/*padding:10px;*/


}

#leftcolumn {
width:405px;
background-color:#2c2827;
/*padding: 10px; */
margin: 0;
float: left;
/*border: 1px solid #FF8C00;*/

}

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;

}

HTML them becomes:

<div id="container">
<div id="outer">
<div id="header">
<div id="header1">
<ul>
<li>HOME</li>
<li>INVENTORY</li>
<li>ABOUT US</li>
<li>LINKS</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
<div id="header2"></div>
</div>
<div id="middletop">

<div id="leftcolumn">

THIS WILL BE THE LEFT HAND COLUMN FOR THE PAGE - ALL OF THE PAGE'S CONTENT
WILL GO HERE.</div>

<div id="rightcolumn">

THIS WILL BE THE SIDEBAR

</div> <!--end right column -->
<br class="brclear" />
</div><!--end middletop -->

</div><!-- end outer-->
</div> <!--end container -->
</body></html>

THANK YOU THANK YOU THANK YOU! Everything is beautiful, with the exception of two minor things:

I agree with you on the <li> based menu - i just didn't know how to place it where i wanted it before so I compromised for a crappy map. In IE the alignment as far as left to right goes is perfect for my navigation, but in Firefox it overlaps with the hood of my car. How do I get around that? I am so afraid to screw up my pretty page. lol

The second is my middletop layer: see how to the left it is one pixel to big? I know it is small but it is more noticeable as the "column" grows vertically.

I will now be able to set my <list> as links and take away the green borders and get everything rolling back in the right direction. THANK YOU so much again for your time and effort. Oh the page you should look at for examples is Premier Auto Source Inc.

THANK YOU!


EDIT:

Found another bug with IE: CHeck out Premier Auto Source Inc. see how in Firefox it looks perfectly aligned and in IE it just it to the right. I am talking about the lighter grey column to the left. Here is what the css looks like:


body {
background-color: #0d0c0c;
font-family: Verdana, sans-serif;
font-size: 18px;
font-color: #000000;
margin: 0;
padding: 0;
}

a:link, a:active, a:visited {
Font-Weight:none;
Color: #171717;
Text-Decoration: none;
}
a:hover {
Font-Weight:none;
Color: #0c0c0c;
Cursor: auto;
Text-Decoration: none;
}

#container{
position: relative;
text-align: center;
color: #000;

}
div#outer {
width: 690px;
background-color:#0d0c0c;
margin: 0 auto;
padding:15px;
/*border:0;*/
text-align: left;
font-size: 70%;
}

#header{
height: 249px;
width: 690px;
margin: 0;
padding: 0;
/*border: 1px solid white;*/

}
#header1{
background: url(/images/map.jpg) no-repeat;
height: 86px;
}

#header2{
background: url(/images/top2.jpg) no-repeat;
height: 163px;
padding: 0;
}

#header1 ul{
margin: 0px 0px 0px 8px;
padding-top: 57px;
list-style: none;
font-family: Impact;
font-size: 20px;
font-weight: none;
color: #171717;

}

#header1 li{
display: inline;
margin-right: 8px;
}


#middletop {
width: 650px;
margin: 0 auto;
padding:0px;
background-color:#2c2827;
/*border:0; */
border: 1px dotted green;

}

#rightcolumn {
width:199px;
margin: 0 0 0 425px;
margin-top:0px;
background-color:#2c2827;

/*float: right; */
/*padding:10px;*/


}

#leftcolumn {
width:405px;
background-color:#363231;
padding: 5px;
margin-left: 10px;
maring-right: 0px;
margin-top: 0px;
margin-bottom: 10px;
float: left;
/* border: 1px solid #FF8C00; */

}

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;

}

YW
For the menu alignment add this to the #header1 ul block: padding-left: 5px;

In #middletop, make these changes:
width: 648px;
margin: 0 0 0 21px;

In #leftcolumn, make this change: margin-left: 8px;

In #rightcolum, make this change: margin: 0 0 0 442px;

In #outer, make this change: padding-top:15px; -- you don't want just "padding: 15px", that adds 30 px to your width.

By adding a border to #middletop, you added 2px to 650, so you must reduce the width then add the border to get the 'perfect match' to your header. Then the other adjustments go along with that.

Other things in your CSS:
there is no "font-color", all you need is "color"
You've got margin spelled wrong in one place

I assume once you have it working you'll take the styles out of the document and use the external file ? Having both makes them fight each other.