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

HTML & CSS
1

I have been at it all night…

I want to have a div class thats 100% of the page not 100% of the 1000px wrapper, so a div with a background style thats full width but the content still 1000px… 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('MY IMAGE') }

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(‘MY IMAGE’) }

2

I’m not very clear what you’re trying to achieve here. Could you post a rough diagram of the layout you want? It would also help to have the HTML that goes with the above CSS. :slight_smile:

3

He has a 1000 px wrapper div (A) w/ another div (B) inside of that.

Instead of having that div have a width of 1000px when set to 100%, he wants it to be 100% of the screen.

I think you would want to have div B be outside of div A, but still have the text/content inside of div A.

~TehYoyo

4

In your code, your #wrapper’s value is 1000, it should be 1000px.

You should imagine div elements as boxes. If you’d like to have the biggest box (with 100% width) to be the container for a smaller box (div with 1000px width), then you’d have to place the smaller box inside the bigger box.

You could use the <body> element to be your 100% container. If you, for whatever reason, require an extra <div>, then your box hierarchy should be like this:

<div id="outerWrapper">
  <div id="innerWrapper">
    .
    . <!-- all other elements -->
    .
 </div>
</div>

#outerWrapper {
   width:100%;
}

#innerWrapper {
    width:1000px;
}
5

Yeah I get divs… I just did not know how to create a div outside of the wrapper so what I did was make the wrapper 100% and created a class that acted as the container…


#wrapper {width:100%;margin:0 auto;}
.content_wrap {width:960px;margin:0 auto; }
.pricing-wrapper { clear:both; width:100%; height:100%; background:url('MY IMG URL') }

The only thing I do not like with this is I have to add this around all my WP content ex. <div class=“content_wrap”> MY WP CONTENT </div>

It creates problems with my blog page and my contacts page http://visumdesignz.com/blog/ http://visumdesignz.com/pricing/ any ideas how to solve that?

6

You need to change the markup for all templates. The blog template doesn’t use #wrapper or .content_wrap.

7

Yeah I figured it would be with the template… I added the div tags to the portfolio templates, but I do not see a blog template in the page settings it is using default template…

8

You’ll need to check index.php and/or any other .php files you’re using. If it’s using pages, more specifically the default page template, then you’ll need to edit page.php.