[SOLVED] simple layout help

[Stickybomb]

ok i am horrible with css layouts i guess because i am trying to create a simple 3 row layout header,content,footer. Where the content is 797px wide and the height is auto, and the head and footer are 100% in width and 25px in height. I have the content wrapped in a container that is 100% wide and auto in height. If anyone could assist me i would appriciate it.

 

here is the basic layout

 

//CSS

#top {
position:relative;
width:100%;
height:25px;
background-color: #F78E4C;
}
#container {
position:relative;
width:100%;
height:auto;
background-color: #F8E39D;
}
#content {
position:relative;
width:797px;
height:auto;
margin:0px auto;
}
#footer {
position:relative;
width:100%;
height:15px;
background-color: #F78E4C;
padding:5px;
z-index:3;
color: #FFFFFF;
text-align:center;
font-size: 12px;
font-family: Optima, Times, Courier;
font-weight: bold;
line-height: 15px;
}

//HTML

<div id="top"></div>

<div id="container">
<div id="content">
</div>
</div>

<div id="footer">

[lando]

Is there a specific issue you are having?  You didn't mention any issues...

[Stickybomb]

reply sorry i am having 2 issues

 

1. the header does not fully expand all the way across the screen for some reason the widow is always scrollable and when you scroll to the left you see that the header does not reach the other side.

 

2. I need the footer to be placed at the bottom of the content no matter how much content there is

 

i provided some images to illistrate whats happening

 

whats happening

 

what i need

 

i have search all over and tried alomst everything. i even gave up and tried tables and this is the funny part it still did not expand the header all the way even with tables!

 

any help is appriciated