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

[visumdesignz]

I have been at it all night…

The page I am struggling with is here http://visumdesignz.com/pricing/ 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('http://visumdesignz.com/wp-content/uploads/2012/04/rough_diagonal.png') }

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(‘http://visumdesignz.com/wp-content/uploads/2012/04/rough_diagonal.png’) }

[Senff]

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]

[visumdesignz]

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)); } ?>

[Author]

Posts