Forums

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

Home Forums CSS aligning container width and page width when using percentages

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

    Hello everyone! I’m new to this forum, like and use the website often and am hoping to find some help on a CSS issue im struggling with.

    What I have is a full width header, 100%
    a content with a max width of 1200px which is in the center

    What I would like to achieve is the content within the full width header 60% and 40% in the 1200px container.
    The content blocks have a background which goes all the way to the side. when using 60% and 40% on the background it does not align anymore with the content blocks.

    I think having a look at the codepen would be much easier to understand what I mean;

    https://codepen.io/sumpson/pen/zjXJPG

    it shows some kind of a solution but I’m hoping there is a better one. On the dev site https://www.wpcompleet.nl/cp/ it looks a bit better than on the codepen

    Hope someone has a solution and is willing to help.

    Regards,

    Philippe

    #271571
    Paulie_D
    Member

    What I would like to achieve is the content within the full width header 60% and 40% in the 1200px container.

    I’m not quite sure what it is you are after but think you want the .site-branding div etc to align with the .content div.

    If so, why not just wrap the branding and navigation in a container inside the header and use the same width/margin on that?

    #271572
    sumpson
    Participant

    Hmm it is quite difficult to explain, the .site-branding is not an issue, I know how to align it 60%/40% within a .content div.

    the problem is when i use 60% 40% on a full width row it does not align with a 60% 40% content row.

    as shown on: http://wpcompleet.nl/cp/wp-content/themes/cp/60-40-example.png
    I know of work-a rounds but not in the case of a (curved svg) background stretching all the way to the sides.

    #271573
    sumpson
    Participant

    I found a solution using jquery, I think its not possible with only css

    https://codepen.io/sumpson/pen/KRYrJe

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