I'd like to use Bootstrap's .container property to format my site, not .container-fluid, as I want the width limited at certain viewports. I also would like to have half the (desktop) site static, filling the left half of the window. I can make this happen, but when I use position:fixed; the col-md-6 adopts 50% of the full width of the viewport, not of the .container, and my content extends under the right half, as you can see where I've made the opacity of the white background less.
How do I make the left half of my responsive content fixed, while still maintaining width properties of .container?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.leftside {
background-image: url("http://studiotierney.com/studiotierneycom/sample/images/leftside-BG.jpg");
background-size:cover;
background-position:50% 50%;
padding:0;
}
@media (max-width:991px) {
.leftside {
height:800px;
color:white;
padding:0;
}
.bluebg {
position:absolute;
width:100%;
background-color:#0063af;
top: 0;
left: 0;
padding: 0; /* Cover the full screen width */
height:800px;
}
}
@media (min-width:992px) {
.leftside {
position:fixed;
height:100%;
color:white;
overflow:hidden;
padding:0;
}
.bluebg {
position:fixed;
width:50%;
background-color:#0063af;
top: 0;
left: 0;
padding: 0; /* Cover the full screen width */
height:100%;
}
}
.logo {
text-align:center;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container bluebg"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 leftside">
<div class="row">
<div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
<div class="col-xs-8 logo">
<img src="http://studiotierney.com/studiotierneycom/sample/images/sampleLogo.png" class="img-responsive" alt="Sample Logo" style="margin:auto;" />
</div>
<div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-6" style="background-color:white;height:4000px; opacity:.8;">Scroll Content</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
</body>
</html>
http://studiotierney.com/studiotierneycom/sample/container-sample.html
