Full-width background issues

I'm working on a site redesign that is adding some full-width background colors and images to a defined width content area. I think I've worked out most of the CSS and content code, but I'm left with a couple issues and questions...

1 - The "Nav" bar is on top of the "Logo" section. I understand it's absolutely positioned, but so are my footer bars, and they arent acting that way. Shouldnt the clear:both div between them force the nav below the logo box?
2 - The red/blue footer areas need to have their own background color extend to the browser width. My first thought is to have an extra-wide 1px high image that I use CSS to position. Is that the best way to do it?

If you have any other comments on how to optimize/simplify this layout, PLEASE let me know! Live code available here: http://bit.ly/ee4qYc

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
</head>
<body>
<style>
	#container {
		height:100%;
		margin:0 auto;
		/*position:relative;*/
		width:965px;
	}
	#headercontainer {
		background-color:pink;
		width:965px;
		height:100px;
		margin:0 auto;
	}
	#headernavcontainer  {
		left: 0;
		position: absolute;
		text-align: left;
		width: 100%;
		background-color:yellow;
	}
	#headernav{
		width:965px;
		height:30px;
		margin:0 auto;
	}
	#footercontainer {
		background-color: #C0C0C0;
		left: 0;
		position: absolute;
		text-align: left;
		width: 100%;
	}
	#footer {
		margin:0 auto;
		width:965px;
	}
	#footerleft {
		float:left; 
		height:100px; 
		width:700px; 
		background-color:red;
	}
	#footerright {
		float:left;
		height:100px; 
		width:265px; 
		background-color:blue;
	}
	#footerbar2container {
		background-color:orange;
		width: 100%;
	}
	#footerbar2 {
		background-color:orange;
		margin:0 auto;
		width:965px;
	}
	#footerbar3container {
		background-color:teal;
		left: 0;
		position: absolute;
		text-align: left;
		width: 100%;
	}
	#footerbar3 {
		background-color:teal;
		margin:0 auto;
		width:965px;
		height:75px;
	}
	#footerbar4 {
		background-color:navy;
		margin:0 auto;
		width:965px;
	}
	#footerbar4container {
		background-color:navy;
		width: 100%;
	}
</style>
	<div id="container">
		<div id="headercontainer">
			<div id="topheader">
				LOGO		
			</div>
			<div style="clear: both;"></div>
			<div id="headernavcontainer">
				<div id="headernav">
					NAV
				</div>
			</div>
		</div>
		<div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam metus eros, bibendum eu porta a, sodales eu lacus. Proin congue elit vitae diam euismod consequat. Nam in dui ipsum, molestie accumsan augue. Donec odio urna, ultricies at aliquam nec, mollis ac tellus. In at tortor quis nunc imperdiet laoreet ut quis diam. Nullam magna risus, fermentum vestibulum pulvinar ac, suscipit eu urna. Vivamus vehicula semper elit a bibendum. Nunc eget sem risus, in placerat lectus. Vivamus augue magna, mollis et volutpat quis, consequat sit amet urna. Cras est ante, luctus tincidunt ornare sit amet, consectetur eu mauris. Nunc ultrices interdum mauris, et feugiat arcu pulvinar at. Sed ac fermentum diam. Nulla imperdiet hendrerit ipsum, ut consectetur nulla imperdiet ac. Donec ut tincidunt velit. Donec accumsan augue id nibh viverra ac accumsan purus egestas. Duis euismod convallis felis ac aliquet.</p>

			<p>Proin lacinia, mi vitae aliquam bibendum, ligula turpis scelerisque turpis, quis vulputate sapien mauris sit amet tortor. Proin non nulla sapien, ac volutpat nisi. Nam vel vulputate justo. Nam vel euismod massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin diam augue. Vestibulum consequat tincidunt neque, nec placerat dolor egestas sit amet. Mauris ultrices feugiat dui. Mauris eros metus, interdum eget aliquam nec, pellentesque id sem. Nullam diam augue, ultricies id laoreet lobortis, tempor ut neque. Duis accumsan ultrices justo, ac mattis velit dapibus in. Nullam scelerisque dolor id ipsum sodales scelerisque. Morbi eu urna sapien. Praesent sed adipiscing mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

			<p>Sed pulvinar, est at rutrum tempus, erat dolor ornare purus, ut cursus arcu ligula congue ipsum. Fusce aliquam adipiscing rutrum. Proin et erat ac velit hendrerit blandit. Pellentesque massa risus, rutrum sit amet iaculis nec, tincidunt nec metus. Nullam dictum ante eu nibh scelerisque molestie. Integer hendrerit porta ligula ac ornare. Proin eleifend neque a ligula pretium accumsan. In eu felis ut leo egestas aliquam non ut lectus. Aliquam erat volutpat. Proin suscipit dictum fringilla. Nulla facilisi. Donec urna odio, aliquam vitae sollicitudin id, condimentum vel turpis. Donec pharetra neque sit amet purus mattis porta. Mauris sed dictum ligula. Praesent convallis, lectus sed facilisis aliquet, libero enim elementum quam, eu lobortis metus elit non ipsum. Nullam non consequat lectus. Donec sed vulputate nisl. Vivamus vitae dui ante, quis commodo lacusstas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed iaculis molestie nunc id cursus. </p>
			<div style="clear: both;"></div>
		</div>
		<div id="footercontainer">
			<div id="footer">
				<div id="footerleft">FOOBAR LEFT</div>
				<div id="footerright">FOOBAR RIGHT</div>
				<div style="clear: both;"></div>
				<div id="footerbar3container">
					<div id="footerbar2container">
						<div id="footerbar2">FOOBAR2</div>
					</div>
					<div id="footerbar3">FOOBAR3</div>
					<div id="footerbar4container">
						<div id="footerbar4">FOOBAR4</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Open in new window

layout.jpg
nzinsliAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GamesNET2Commented:
If the parent div of the absoluteley position div is also using a 'position' style then the absolute position will relate to this - has the footer that works got a position parent div?

For  a red/blue bar across the bottom just sort the width to go 100% accross the page (not within a container) specify the height, and then the background color and you should be fine.

Any problems, can you send an html link?
0
nzinsliAuthor Commented:
The footercontainer div is abs positioned, but the immediate parent (footer) is not. The difference between the header/footer right now is the footer is 3 levels deep, header is 2. If I add position to the headercontainer as is, the full width of the yellow nav bar then gets cut to the width of the headercontainer div.

I dont think the red/blue 100% solution is that simple. If you look at the attached image, I need 2 background colors on the same row, and they arent split equally. The current boxes in my example that are red/blue are only showing the content containers. The grey box behind it spreads across 100%...but its only one color.

If you look at my original post, I do have a link to see my sample code.
0
andrewkhanCommented:
For the footer background, why not have it in a seperate layer behind the footer contents, with a two column system? Then set it's z-index to be lower than the footer content, this system *should* work in theory, make any tweaks to make it work.





#footer_left_bg {
		float:left; 
		height:100px; 
		width:50%; 
		background-color:red;
                position: relative;
                z-index: 10;
	}
	#footer_right_bg {
		float:right;
		height:100px; 
		width:50%; 
		background-color:blue;
                position: relative;
                z-index: 10;
        }   
        
        #footer {
		margin:0 auto;
		width:965px;
                z-index: 20;
	}

Open in new window

<div id="footercontainer">
<div id="footer_left_bg"></div>
<div id="footer_right_bg"></div>
			<div id="footer">
				<div id="footerleft">FOOBAR LEFT</div>
				<div id="footerright">FOOBAR RIGHT</div>
				<div style="clear: both;"></div>
				<div id="footerbar3container">
					<div id="footerbar2container">
						<div id="footerbar2">FOOBAR2</div>
					</div>
					<div id="footerbar3">FOOBAR3</div>
					<div id="footerbar4container">
						<div id="footerbar4">FOOBAR4</div>
					</div>
				</div>
			</div>
		</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

nzinsliAuthor Commented:
Great idea andrewkhan, I hadnt thought of putting divs in the background. I think my tiled background image idea might be a little simpler, but I did get your solution to work with some minor fixes to your css. Updated page @ http://bit.ly/ee4qYc

Still looking for an answer to the header issue if anyone has any ideas there.
0
nzinsliAuthor Commented:
I just realized that none of my full-width elements are working in IE. Everything is left aligned and not stretching. Can anyone assist in making this more browser compatible?
0
andrewkhanCommented:
Nzinsli,

The reason your divs are aligned to the left is because they are absolutely positioned to the body. Unless the parent container of them is set to relative they will be absolutely positioned to the body and not their container.

To fix these, take out the comments in the container id.

Now, there is another problem in that the full width red/blue backgrounds are not appearing - no doubt because of positioning. Let me get back to you once I have fixed that.

#container {
		height:100%;
		margin:0 auto;
		position:relative; // This is the important part
		width:965px;
		text-align:left;
	}

Open in new window

0
nzinsliAuthor Commented:
Yeah I discovered that late last night. I also found that if I added the doctype that I'm using on our live site, things behaved more like FF. The footer red bar is still broke, but the blue on the right is working.

see live code update: http://bit.ly/ee4qYc
0
nzinsliAuthor Commented:
I'm also still perplexed why the clear:both div between the header and nav isnt pushing the nav below the topheader div. I can push nav down with a margin or something else, or the content in my actual site header will push it down...but still confusing as to why it doesnt push it there, but does in the footer.
0
andrewkhanCommented:
Nzinsli,

Just had a look - well done on getting that working.

Just had a look at the website and by the look of things the clear both IS pushing the nav below the topheader div? Perhaps you have already fixed it.
0
nzinsliAuthor Commented:
Actually, I just realized you're right. Its not the topheader I wanted to clear, it was the headercontainer itself. I think I've gotten this thing about as close as its gonna get! Thx for the help all.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.