Search code examples
htmlcsswidthfill

Create a centered, full page width header, with one side taller than the other

I'm trying to build a rather complicated header. This is what it should look like:

As you can see, the header needs to be centered on the page, but the elements need to expand the width of the page. The issue I'm running in to is that I can't get the white part to extend properly. This is what I currently have:

I can't figure out any way to extend the white background over the black bar on the left side. I can kind of get it working using :before, but only at certain zoom levels (at certain points, a gap would appear between the logo and the overlapping :before, causing a bit of the black bar to bleed through), and we need this to work at all zoom levels.

My only other thought would be to use an extremely wide background image for the entire navigation, but I don't think that's an acceptable solution either.

Does anyone have any suggestions?

Demo: http://www.weblinxinc.com/beta/header/

Solution

  • Try that, on your current code (I used your current #headerLeft:after pseudo element) : 

    #headerWrapper header #headerLeft:after {
/* clear: both; */
content: "\0020";
display: block;
/* visibility: hidden; */
/* zoom: 1; */
width: 1000px;
height: 50px;
background: white;
top: 50px;
right: 100%;
position: absolute;
margin-right: -60px;
}

    In a word, I just use a pseudo element to cover the left part in white. So I put it a very high width, and I position it relatively to the logo.

    Feel free to put it on another element / pseudo element : I guess this one is making a clearfix.