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
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>ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
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.
Still looking for an answer to the header issue if anyone has any ideas there.
ASKER
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?
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.
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;
}ASKER
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
see live code update: http://bit.ly/ee4qYc
ASKER
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.
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.
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.
ASKER
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.
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?