SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS layout - stretch to page

    Hi Folks,

    Can anyone please tell me how I can achieve the attached layout.

    I want the blue background color to stretch the full width regardless of resolution and stretch to the bottom of the page.

    I'd like the content center aligned, attached is a sample layout.

    sample.gif

    Many thanks

  2. #2
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Specifying the height of the image 100% should stretch to the full width. Centering the content you simply use text-align:center. Post your code, members here might able to suggest codes to use.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    To center the content, well, the container of hte content (thus everything gets centered) you should set a width on the containing element and set margin:0 auto; which will allow the eleemnt to get centered.

    I don't have access to the attachment yet, due to it not being approved , though do you have an attempt? Code? If so, provide it to us (whetehr you just copy paste the code here, or give us a link to the page (which is preferable)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the way I would do this.

    Code:
    <div id="top-section"> <!-- Try to make these divs meaningful divisions and name them something semantic -->
    
      <div class="content-wrapper">
    
    	<!-- Top content here -->
    
      </div>
    
    </div> <!-- End top section -->
    
    <div id="bottom-section">
    
      <div class="content-wrapper">
    
    	<!-- bottom content here -->
    
      </div>
    
    </div> <!-- End bottom section -->
    And the CSS:

    Code:
    #top-section {
    	background-color: #fff;
    }
      
    #bottom-section {
    	background-color: #06c;
    }
    
    .content-wrapper {
    	width: 80%;   /* Specify whatever width you want here */
    	margin: 0 auto;   /* Setting left and right margins to auto will center any element with this class */
    }

  5. #5
    <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)
    Quote Originally Posted by Conquer View Post
    This is the way I would do this.

    Code:
    <div id="top-section"> <!-- Try to make these divs meaningful divisions and name them something semantic -->
    
      <div class="content-wrapper">
    
    	<!-- Top content here -->
    
      </div>
    
    </div> <!-- End top section -->
    
    <div id="bottom-section">
    
      <div class="content-wrapper">
    
    	<!-- bottom content here -->
    
      </div>
    
    </div> <!-- End bottom section -->
    And the CSS:

    Code:
    #top-section {
    	background-color: #fff;
    }
      
    #bottom-section {
    	background-color: #06c;
    }
    
    .content-wrapper {
    	width: 80%;   /* Specify whatever width you want here */
    	margin: 0 auto;   /* Setting left and right margins to auto will center any element with this class */
    }
    I don't think you need the div w/ id="top-section" or "bottom-section". Wrapping a div in a div and not applying any styles or having it hold anything? I would just cut it down to top-section and bottom-section and not have any of your pointless content-wrapper divs.

    Then, combine the CSS in .content-wrapper w/ #bottom-section, except changing width to 100%.

    ~TehYoyo

  6. #6
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I don't think you need the div w/ id="top-section" or "bottom-section". Wrapping a div in a div and not applying any styles or having it hold anything? I would just cut it down to top-section and bottom-section and not have any of your pointless content-wrapper divs.

    Then, combine the CSS in .content-wrapper w/ #bottom-section, except changing width to 100%.

    ~TehYoyo
    But then it doesn't do what mattastic is trying to achieve. The content wrapper divs aren't pointless. They are there to center the content on the page, while the top and bottom sections' backgrounds take the full width of the window.

  7. #7
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello!
    this could be achieved by two ways

    first you can use this as background for your body tag (1px width for white and blue line and repeat-x)

    or secondly divide your page in following manner
    .header-out{
    background-color:#fff;
    }

    .contents-out{
    background-color:blue; (enter which ever you like)
    }

    .header,.contents{
    width:1000px; (just an example you need to put as much as you want)
    (lines below will keep your divs in center)
    margin-left:auto;
    margin-right:auto;
    }



    <div class="header-out">
    <div class="header">
    your text here
    </div>
    </div

    <div class="contents-out">
    <div class="contents">
    your text here
    </div>
    </div>


    I have test above code this works but if you need help, I will be glad too,

    Best

    ----------------
    Faisal Irfan
    Last edited by TechnoBear; Apr 5, 2012 at 14:50. Reason: Please wait 90 days for a signature

  8. #8
    <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)
    Quote Originally Posted by Conquer View Post
    But then it doesn't do what mattastic is trying to achieve. The content wrapper divs aren't pointless. They are there to center the content on the page, while the top and bottom sections' backgrounds take the full width of the window.
    It could be done w/ padding.

    ~TehYoyo

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,408
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    It could be done w/ padding.
    Have you tried that? I can't see a way to make it work. As Conquer explained, the outer divs #top-section and #bottom-section need to stretch the entire width of the viewport, to provide the two background-colour sections required. You can't centre content using padding without knowing both the width of your content and the width of the viewport. As the latter is outwith your control, setting a centred inner div in each section is the easiest solution.

    I agree with you in principal, that having extra, unnecessary divs is a bad practice. But when a div is the right tool for the job, use it.

    Having said all that, I would do it slightly differently. The easiest way to get the blue to stretch to the bottom of the page irrespective of content length is to set it on <body>, so
    Code:
    <div id="top-section">
    
      <div class="content-wrapper">
     
    Top section content here
    
      </div>
    
    </div> <!-- End top section -->
    
    <div class="content-wrapper">
    
    
    Lower section content here
    
    </div>

    Code CSS:
    body {margin: 0;
    	padding: 0;
    	background-color: #06C;
    	color: #fff;
    	}
     
    #top-section {
    	background-color: #fff;
    	color: #333;
    	margin: 0;
    	}
     
    .content-wrapper {
    	width: 80%;   /* Specify whatever width you want here */
    	margin: 0 auto;   /* Setting left and right margins to auto will center any element with this class */
    }

  10. #10
    <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)
    Well couldn't you just define left-padding:10%; and right-padding:10%; ?

    ~TehYoyo

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,408
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Well couldn't you just define left-padding:10%; and right-padding:10%; ?
    If you set an 80% width on a div, you can also set a max-width to prevent it becoming too wide on a large screen, or a min-width, to prevent it becoming too small. If you use 10% padding, you're stuck with your content at 80% of the viewport, however large or small it may be.

  12. #12
    <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)
    Quote Originally Posted by TechnoBear View Post
    If you set an 80% width on a div, you can also set a max-width to prevent it becoming too wide on a large screen, or a min-width, to prevent it becoming too small. If you use 10% padding, you're stuck with your content at 80% of the viewport, however large or small it may be.
    OK. So it's a bad idea to use it. Gotcha. You seem to be correcting me a lot, TB

    ~TehYoyo

  13. #13
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,408
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    You seem to be correcting me a lot, TB
    I prefer to think of it as guiding you and encouraging you to think things through properly. You've got the right idea, just take your time and think. Or better still, set up a test case and see what happens.

  14. #14
    <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)
    Quote Originally Posted by TechnoBear View Post
    I prefer to think of it as guiding you and encouraging you to think things through properly. You've got the right idea, just take your time and think. Or better still, set up a test case and see what happens.
    I suppose that's how we all learn

    Thanks
    ~TehYoyo


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
  •