100% Header Width

HTML & CSS
1

Hey guys. I’ve got a small problem.

I’m trying to make my header 100% in width to stretch across the browser, and then I have another div inside it that has a width between 800px and 1000px which includes a banner and navigation bar. I just want the background to stretch across the page.

I’ve done this before, but I recently downloaded a php script that includes the CSS files and everything. But the mark up is a steaming piece of crap.

The site is theconfessionboard.com. I’m not expecting a full evaluation of how bad the code is simply because I didn’t code it myself, I’m still trying to clean that up. But if you can help getting my header background to stretch the way I want, I will be happy.

Thanks.

Edit: So what I basically want is this:

Before:

After:

2

Hi. Simple fix. You have the parent have a fixed width and its centered on the page. You need to move the header out of that fixed width parent and let it become free.

<div id=“container”><div id=“branding_banner”><a href=“http://theconfessionboard.com”><img alt=“Confession Board” src=“http://theconfessionboard.com/images/branding_banner.png”></a></div>
<div class=“colcenter”>

Above bolded is your header code. Your blue bar. It’s originally the child of that <div class=“colcenter”>. You need to move it from that child, to the first child of #container, that way it will span across the page because #container doesn’t have a set width.

3

Hrm close. I’m trying to get the black menu bar to stretch too (I’m sorry for not being clear on that earlier). Also, the logo itself is now on the left, I want it in the center. I uploaded the site again so you can see what I mean.

I appreciate the quick answer by the way.

Edit: I’m experimenting with the .colcenter class. Since it’s a class, it’s ok to use it more than once in a single page correct?

4 
<div id="bg_top_content">
                    
				<ul id="menu">
                        					<li><a href="http://theconfessionboard.com/index.html" title="Home" id="active">Home</a></li>
					<li><a href="http://theconfessionboard.com/confess.html" title="Confess">Confess</a></li>
					<li><a href="http://theconfessionboard.com/read.html" title="Read Confessions">Read Confessions</a></li>
											<li><a href="http://theconfessionboard.com/randomthread.html" title="">Random Confession</a></li>
					<li><a href="http://theconfessionboard.com/search.html" title=""></a></li>
	
						    
                        					</ul>
                    
				</div>

That HTML will have to be placed after the blue bar HTML I bolded above. It’s the same concept.

5

As for the centering to line up, you could nest a div inside each of those example HTMLs I posted above, and give that the same margin:auto and width property you give to “.colcenter”.

That will allow it to replicate that physique :).

6

I added .colcenter a couple of more times. I’m not sure if it’s the right thing to do, but it worked. The problem I have now is that it’s giving me more validation errors because I used it inside my menu bar. I’ll have to look into what you are suggesting here.

Edit: Ok I took the .colcenter I was using inside the <ul> menu bar and put it back outside and added another </div> tag after the list which gave me the result I wanted and removed about 11 errors.

Thanks for the help :slight_smile:

7

Glad I was able to help :).

If you have any more questions, feel free to ask.

8