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

Home Forums CSS Adding a 100% wrapper along with template default 960px wrapper?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #37673

    I have been at it all night…

    The page I am struggling with is here notice the grey texturized area around the pricing tables… I want this div to be 100% but in the style.CSS the wrapper width is 1000px

    My CSS…

    /* Content area */
    #wrapper{width:1000; margin:0 auto;}
    #wrapper .pricing-wrapper{width:100%; margin:0 auto;}

    #container_bg #content_full {}
    #container_bg #content {float:left; width:69.79%; padding:40px 0 40px;}
    #container_bg #content_right {float:right; width:670px; padding:40px 0 40px;}
    .content_shadow{width:960px; height:10px; margin-bottom:10px; background:url('images/content_shadow.png') no-repeat;}
    #container_bg .pricing-wrapper { clear:both; width:100%; height:100%; background:url('') }

    This is my content CSS section… What I want to learn here is how to add some CSS rules to allow me to create a div with a 100% width while keeping all content inside the 1000px wrapper… Make sense?

    PS. I added some CSS that us useless like the #wrapper .pricing-wrapper thats because of testing… the div with the grey texture is #container_bg .pricing-wrapper { clear:both; width:100%; height:100%; background:url(‘’) }


    Well, your wrapper is set to 1000 pixels, and the .pricing-wrapper is set to 100% — this means it’s 100% of the width of the container it’s in. So for .pricing-wrapper, 100% is the same as 1000 pixels.

    So if I understand correctly, you want the .pricing-wrapper to be 100% of the browser window, not 100% of the wrapper. I don’t think it’s really possible with straight away CSS to define the width of a contained div as 100% of the browser window (and disregarding its depth in the markup).

    The fastest/quickest solution is probably to set the wrapper to 100%, then set the .pricing-wrapper to 100% too (give this the background that you want to stretch full width), and then have another element in it that is 1000 pixels.

    // set this to 100%
    // set this to 100% and give background image
    // set this to 1000 px and margin 0 auto
    [pricing stuff goes here]

    [FAQ goes here]


    Thanks for the reply and it looks like that would be the solution.. it came across my mind trust me.. but the only reason I disregarded it was because I have no clue how to get my page content inside the 1000px div would I need to edit the page.php?

    Here is my page.php code you can see the container_bg and container_full corresponds with the coding in the content area of my CSS the issue here is I would need help changing the rules. If you someone would be kind enough to help me I am sure it’s an easy move.

    ID, 'header_choice_select', true));{ get_header(get_post_meta($post->ID, 'header_choice_select', true)); } ?>

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