Template wrapper set at 1000px.. Set div at 100% of the page getting outside the wrap

[visumdesignz]

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') }

[brainbuzzmedia]

You can't do it like that. A div inside another div can't be bigger than its parent unless you are using absolute positioning.

[visumdesignz]

You can't do it like that. A div inside another div can't be bigger than its parent unless you are using absolute positioning.


Yeah that makes sense I understand that concept but I do not understand how to create a parent wrapper... Is there a way I can create a wrapper above the wrapper?

ex.

100% wrapper
__________________________________________________________
grey area
--------------------------------------------------------------------------
_________________________
1000 px content

[auntnini]

You need to specify unit of mearuement, such as PX = pixels for width:1000px;

Example from http://www.josephdenaro.com/ using percentages;



html { color: black; background: #ffffff; margin: 0; padding: 0; }
body { color: black; background: transparent; margin: 0; padding: 0; text-align:center; }
#wrap { color: black; margin: 0 auto; width: 85%; max-width:1000px; min-width: 250px; position: relative; background-color: rgba(255, 255,255, 0.25); z-index:300; }
#space { position: relative; width: 95%; max-width: 450px; min-width: 150px; margin: 6px auto; background: transparent url(../heads/37s.jpg) no-repeat center; text-align:center; padding: 40px; border: medium outset #00ced1; overflow: visible; }
#space img { height: auto; width: 85%; max-width: 350px; min-width: 100px; margin: 0 auto 10px auto; }