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
    6,057
    Mentioned
    253 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.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  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
  •