8 Replies Latest reply: Feb 6, 2014 9:15 AM by jyeager11 RSS

    Trying to fill the viewport on only one side of a centered website layout.

    jyeager11 Community Member

      Howdy,

       

      I've got a website layout that is essentially contained inside the following wrapper div.

       

      div#wrapper {

          position:relative;

          display:table;

          width:980px;

          height:100%;

          margin:0 auto;

          text-align:left;

      }

       

      It's basically a 980px-wide frame that stretches top to bottom, and is hoizontally centered via auto margins.

       

      I am trying to fill all the empty space on the left of this wrapper. In other words, from the very beginning of the viewport up until where the wrapper begins.

       

      Naturally, this area is dynamic, not static. It'll depending on how much wider than the 980px wrapper your viewport is.

       

      I was wondering how to do this. My first idea was to place an absolutely-positioned div as the very first element INSIDE the wrapper, and then try to stretch it indefinitely to the left, but that doesn't work without knowing exactly how many pixels to the left the edge of the viewport is.

       

      Any suggestions?

        • 1. Re: Trying to fill the viewport on only one side of a centered website layout.
          Ben Pleysier CommunityMVP

          Is this what you are looking for?

          <!doctype html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>Untitled Document</title>

          <style>

          * {

              margin: 0;

              padding: 0;

          }

          html {

              background-image: url(https://www.google.com.au/images/srpr/logo11w.png);

              height: 100%;

              background-repeat: repeat-y;

          }

          body {

              width: 980px;

              margin: auto;

              height: 100%;

              background: #E36C05;

          }

          </style>

          </head>

           

          <body>

          <h1>My Project</h1>

          </body>

          </html>

          • 2. Re: Trying to fill the viewport on only one side of a centered website layout.
            jyeager11 Community Member

            Ben Pleysier wrote:

             

            Is this what you are looking for?

             

            Almost. You actually just reminded me that I forgot an important part of the equation : the centered 980px wrapper div that contains all the content doesn't have its own background color or image. The background of the content area is the same that extends indefinitely to the right.

             

            I've created this image to illustrate. The dotted lines are the wrapper, but its true borders are invisible to the user.

             

            http://i.imgur.com/C4Ojp4w.png

            On a wider viewport, the center area remains as finite as it is -- 980px -- but the empty space around it gets wider.

             

            This is why I thought to position a div to fill the left side, that would know to stop where the wrapper begins. I just don't know how to make that idea work. Maybe it can't be done.

             

            All of a sudden, I'm thinking a 3-column table may be the way to go here. 100% width on the table, but 980px on the center column.

             

            Would that work?

            • 3. Re: Trying to fill the viewport on only one side of a centered website layout.
              Jon Fritz II CommunityMVP

              Could you simplify and just make the <body> background image into a roughly 970 pixel wide bar of color that is only repeated vertically with the background-color set to whatever you want to see on the other side of the wrapper, then set that behind the wrapper with it's own color/image background?

               

              EDIT: the only time the "seams" would show is if someone extended their browser width to about 2960 pixels + and even then, the color that would show would basically act like left padding on the wrapper

              • 4. Re: Trying to fill the viewport on only one side of a centered website layout.
                Jon Fritz II CommunityMVP

                Here's an example of what I mean, just copy and paste this into a new document and create a bar 980x4 pixels wide and change the background-image to that...

                 

                <!doctype html>

                <html>

                <head>

                <meta charset="utf-8">

                <title>Background fills left, disappears on right.</title>

                <style>

                html {

                    height:100%;

                }

                body {

                    margin:0;

                    height:100%;

                    background:url(images/black-bg-bar.jpg) repeat-y red; /* 980px x 4px black colored bar */

                    color:white;

                }

                #wrapper {

                    width:980px;

                    margin:auto;

                    background-color:red;

                    height:100%;

                }

                </style>

                </head>

                <body>

                <div id="wrapper">

                  Plain text without a wrapping element (or some other content to avoid the parent/child margin issues of the wrapper and a starting &lt;p&gt; tag)

                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>

                </div>

                </body>

                </html>

                • 5. Re: Trying to fill the viewport on only one side of a centered website layout.
                  jyeager11 Community Member

                  Unfortunately, people are taking my demo image a little too literally. I only used flat colors to save time, but in hindsight they were misleading. My apologies. Since a picture is worth a thousand words, I believe this may better illustrate what I'm trying to do.

                   

                  http://i.imgur.com/colBAV9.png

                   

                  Again, I'm beginning to think a 3-column table is the way to go, here. 100% width on A + C, 980px width on B, plus a 50% transparent dark background on A.

                   

                  People keep telling me to avoid using tables, but I can't see any other solution to this problem right now.

                  • 6. Re: Trying to fill the viewport on only one side of a centered website layout.
                    Jon Fritz II CommunityMVP

                    I think you're probably right, for simplicity's sake.

                     

                    I would put a large image in the <body> then in the leftmost table cell, add an rgba background color so the gray is partially transparent and overlaid.

                    • 7. Re: Trying to fill the viewport on only one side of a centered website layout.
                      Jon Fritz II CommunityMVP

                      Here's what I whipped up (need to use min and max widths to make it work right)...

                       

                      <!doctype html>

                      <html>

                      <head>

                      <meta charset="utf-8">

                      <title>Background fills left, disappears on right.</title>

                      <style>

                      html {

                          height:100%;

                      }

                      body {

                          height:100%;

                          margin:0;

                          background:url(background-image.jpg) no-repeat;

                      }

                      table {

                          height:100%;

                          width:100%;

                      }

                      .leftmargin {

                          background-color:rgba(155,155,155,0.58);

                          max-width:50%;

                      }

                      .content {

                          width:980px;

                          min-width:980px;

                      }

                      .rightmargin {

                          max-width:50%;

                      }

                      </style>

                      </head>

                      <body>

                      <table>

                      <tr>

                      <td class="leftmargin"></td>

                      <td class="content">

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>

                      </td>

                      <td class="rightmargin"></td>

                      </tr>

                      </table>

                      </body>

                      </html>

                      • 8. Re: Trying to fill the viewport on only one side of a centered website layout.
                        jyeager11 Community Member

                        Thanks. Pretty much how I pictured doing it, just wanted to make sure there wasn't a simple non-table alternative I could have considered before going ahead with it.