Grow your CSS skills. Land your dream job.

This should be easy but I’m missing it

  • kam
    # May 10, 2013 at 4:52 pm

    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

    # May 10, 2013 at 5:02 pm

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

    kam
    # May 10, 2013 at 11:25 pm

    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?

    # May 11, 2013 at 1:32 am

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".