Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Best way to handle 2 column extended background layout?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #198235
    Noel Forte
    Participant

    I’m trying to build this layout, but am running into a bit of trouble putting it together.

    Essentially, the background of the header and content area need to extend all the way to the edge of the left and right sides respectively, however, the page overall needs to have a maximum width so that it doesn’t get too large on bigger screens. It would also be helpful if the content background could be easily changed by using 1 CSS rule.

    I’ve stumbled across a few solutions using :before and :after, as well as calc() but I want to try to go for the best possible browser support here. So far calc() seems like the best solution, but is it the most viable in terms of support?

    #198239
    Paulie_D
    Member

    Is this background color?

    Why not just throw a background linear gradient on the body with a single color stop.

    The “header” (which looks like a sidebar to me) and “content” backgrounds would cover the ‘join’.

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

    #198240
    Noel Forte
    Participant

    You are correct in saying that the “header” is an aside to the actual content. So yes, it’s a sidebar.

    I would put a background on the body, save for the fact that if the content area has a background image on it, that image won’t extend all the way to the edge, which is something that I plan on doing on several pages that I plan to use this layout on.

    #198241
    Paulie_D
    Member

    I think were gonna need to see it.

    A background image is going to be hard to match up between one div and another.

    You might need to re-think the structure.

    Anyway..calc has pretty deep support so it depends on how deep you need to go.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.