CODEWITHSUNDEEP
htmlcss
ExcellentSP
ExcellentSP

Reputation: 1619

Content and Sidebar needs extended backgrounds while keeping grid alignment

I have a Content-Sidebar layout. The content has one background color while the sidebar has another, simple enough. You will see this configuration displayed in the .centered-example elements branch in the attached source code.

The problem I'm confronted with is not only mimicking the centered content grid from .centered-example, but "extending" the .content and .sidebar backgrounds to the edges of the viewport (as seen in the .wrap-left and .wrap-right elements) AND keeping it (mostly) responsive.

Here is an example of what the finished product should look like: Finished Product Example

Below is the code:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style>
            .wrap-left{
                width:66%;
                min-height:500px;
                display:inline-block;
                float:left;
                background-color:rgba(0,0,0,0.48);
            }
            .wrap-right{
                width:34%;
                background-color:rgba(172, 172, 172, 0.48);
                min-height:500px;
                display:inline-block;
                float:left;
            }
            .wrap-left .content{
                max-width:693px;
                width:100%;
                height:100%;
                float:right;
                background-color:transparent;
                /*background-color:rgba(0,0,0,0.48);*/
            }
            .wrap-right .sidebar{
                max-width:347px;
                width:100%;
                height:100%;
                float:left;
                background-color:transparent;
                /*background-color:rgba(172, 172, 172, 0.48);*/
            }
            .centered-example{
                width:100%;
                max-width:1040px;
                height:200px;
                background-color:#000000;
                margin:0 auto;
                clear:both;
            }
            .centered-example .content{
                width:66%;
                height:100%;
                float:left;
                background-color:rgba(0,0,0,0.48);
            }
            .centered-example .sidebar{
                width:34%;
                height:100%;
                float:left;
                background-color:rgba(172, 172, 172, 0.48);
            }
        </style>
    </head>
    <body>
        <div class="wrap-left">
            <div class="content">
                This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.
            </div>
        </div>
        <div class="wrap-right">
            <div class="sidebar">
                This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.
            </div>
        </div>
        <div class="centered-example">
            <div class="content"></div>
            <div class="sidebar"></div>
        </div>
    </body>
</html>

You can see the example in action here: https://jsfiddle.net/fc1Lxmhs/

Let me know if more clarification is needed. Any site examples of a similar execution are of much help as well.

Upvotes: 1

Views: 35

Answers (1)

smdsgn
smdsgn

Reputation: 1746

You can fake the extended background with a CSS3 gradient on the containing element, in this case, the body.

* {
  margin: 0;
  padding: 0;
}

body {
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(50%, #D7D7D7), color-stop(50%, #858585));
  background: -webkit-linear-gradient(right, #D7D7D7 50%, #858585 50%);
  background: -moz-linear-gradient(right, #D7D7D7 50%, #858585 50%);
  background: -o-linear-gradient(right, #D7D7D7 50%, #858585 50%);
  background: linear-gradient(right, #D7D7D7 50%, #858585 50%);
}

.wrapper {
  width: 1040px;
  min-height: 700px;
  margin: 0 auto;
  overflow: hidden;
}

.content {
  width: 66%;
  float: left;
  min-height: 700px;
  background: #858585;
}

.sidebar {
  width: 34%;
  float: right;
  min-height: 700px;
  background: #D7D7D7;
}
<body>
  <div class="wrapper">
    <div class="content">
      This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.
    </div>
    <div class="sidebar">
      This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.
    </div>
  </div>
</body>

Upvotes: 1

Related Questions