Results 1 to 4 of 4

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

  1. #1
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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...

    Code:
    /* 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. #2
    Join Date
    Jul 2010
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by brainbuzzmedia View Post
    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

  4. #4
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default need measurement

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

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

    Code:
    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; }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •