SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,335
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    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.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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:


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

    Code:
    #outerWrapper {
       width:100%;
    }
    
    #innerWrapper {
        width:1000px;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

    Code:
    #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. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by visumdesignz View Post
    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...

    Code:
    #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?
    You need to change the markup for all templates. The blog template doesn't use #wrapper or .content_wrap.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •