Forums

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.

<div id="wrapper">                      // set this to 100%
    <div class="pricing-wrapper">       // set this to 100% and give background image
         <div class="pricing-table">    // set this to 1000 px and margin 0 auto
            [pricing stuff goes here]
         </div>
         <div class="faq">
            [FAQ goes here]
         </div>
    </div>
</div>

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.

<?php if (get_post_meta($post->ID, 'header_choice_select', true));{ get_header(get_post_meta($post->ID, 'header_choice_select', true)); } ?>
<div id="container_bg">
<div id="content_full" >
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php endwhile; // end of the loop. ?>
<?php get_template_part( 'loop', 'page' ); ?>
<?php SEO_pager() ?> 
</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>

treehouse : what would you like to learn today?

Forums

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