This should be easy but I’m missing it

[kam]

I have a site at http://www.kevinmeek.ca/code/

I’ve put colors to the divs to help sort it out.

I want to have the logo in the far left, and the gold header to fit the entire length of the window from the right edge of the logo to the edge of the browser. Then the content div can lie underneath both of these divs.

Problem is that I can’t get the header div to expand all the way to the right. It just stays to whatever the content is in the header unless I implicitly put in a width and/or a height – which I don’t want to do so that the user can resize to their hearts content.

Changing the logo div to position:absolute slides the header div underneath – which is no good also.

What am I missing?

Thanks,
Kevin

[CrocoDillon]

Remove the float from header and give it margin-left: 180px instead (works with the logo either float or absolute positioned).

[kam]

Welllll, Yeah OK. But it’s kinda of kludgy, isn’t it? You’re pushing off the header div off the topplate div the size of the logo img to solve it. What if you change the logo dynamically? Then you’ll have to manually change the margin-left value each time.

Is there a way for the header div to ‘push off’ the logo div and thus not have to worry about the size of the logo image. ie let the browser do the work rather than a human each time?

[Paulie_D]

You’re going to have to re-structure.

If you want the logo + gold ‘header’ area to be 100% of the browser width then take it out of the wrapper.

http://codepen.io/Paulie-D/pen/Hhovu

[Author]

Posts