How to make a responsive div stick to page edge


Tags: html,css,twitter-bootstrap

Problem :

I want my responsive image gallery div to "stick" to the right edge of the browser window with no space between (see image example below).

Current site: http://parkerrichard.com/studiogreen/html/project-01.html

It worked previously when I added

container {
width: 100%;
}

But now that doesn't effect the gallery div (flexslider). I've tried adding the following to the "flexslider" css properties to no avail:

flexslider {
position: absolute; 
float: right; 
right: 0px; 
width 100%;
}

None of it seems to create the desired effect. Any advice or help would be appreciated.

Example of how I want page to appear: Image runs to right edge of screen

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset=“UTF-8”>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Studio Green</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap custom CSS -->
    <link href="css/custom.css" rel="stylesheet">

    <!-- Typekit custom fonts -->
    <script src="//use.typekit.net/bcn3ife.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>

    <link href="css/flexslider.css" rel="stylesheet">

    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <script src="js/respond.min.js"></script>

    <!-- custom icons -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="fonts/flexslider-icon.eot">

</head>

<body>
    <!-- row 1: static navbar -->
    <nav class="navbar navbar-default navbar-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a>
        </div><!-- navbar toggle -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="process.html">PROCESS</a></li>
            <li><a href="office.html">OFFICE</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </div><!--/nav-collapse -->
      </div><!-- container -->
    </nav><!-- navbar -->

    <!-- row 2: body -->
    <div class="container">
        <div class="row centered">

            <!-- sidebar -->
                <aside class="navbar-collapse collapse panel-group col-lg-3 col-med-4 col-sm-4 col-xs-12" id="accordion" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                  <h4 class="panel-title">
                    <li class="active">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                          RESIDENTIAL
                    </li>
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body">
                    <ul>
                        <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
                        <li class="active"><a href="project-01.html">PROJECT <span class="spaced">1</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">2</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">3</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">4</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">5</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">6</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">7</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">8</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">9</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">10</span></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="schools.html">
                      SCHOOLS
                    </a>
                  </h4>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="parks.html">
                      PARKS
                    </a>
                  </h4>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="hospitality.html">
                      HOSPITALITY
                    </a>
                  </h4>
                </div>
              </div>              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFive">
                  <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                      ELEMENTS
                    </a>
                  </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
                  <div class="panel-body">
                    <ul>
                        <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
                        <li><a href="plants.html">ENTRY</a></li>
                        <li><a href="plants.html">FENCES</a></li>
                        <li><a href="plants.html">FIRE</a></li>
                        <li><a href="plants.html">LIGHTING</span></a></li>
                        <li><a href="plants.html">PAVING</a></li>
                        <li class="active"><a href="plants.html">PLANTS</a></li>
                        <li><a href="plants.html">POOLS</a></li>
                        <li><a href="plants.html">SEATING</a></li>
                        <li><a href="plants.html">SCULPTURE</a></li>
                        <li><a href="plants.html">STAIRS</a></li>
                        <li><a href="plants.html">SUSTAINABILITY</a></li>
                        <li><a href="plants.html">WATER</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </aside>

            <!-- slideshow gallery -->          
            <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 pull-left">
                <div class="flexslider">
                  <ul class="slides">
                    <li>
                      <img src="img/project-1_01.jpg" />
                    </li>
                    <li>
                      <img src="img/project-1_02.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                            Location: Los Altos Hills, CA<br />
                            Architect: SDG Architects<br />
                            Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, restraint, minimalization, and restoration landscape.</p>
                    </li>
                    <li>
                      <img src="img/project-1_03.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                          Location: Los Altos Hills, CA<br />
                          Architect: SDG Architects<br />
                          Exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods.</p>
                    </li>
                    <li>
                      <img src="img/project-1_04.jpg" />
                    </li>
                    <li>
                      <img src="img/project-1_05.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                            Location: Los Altos Hills, CA<br />
                            Architect: SDG Architects<br />
                            Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along.</p>
                    </li>
                    <li>
                      <img src="img/project-1_06.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                            Location: Los Altos Hills, CA<br />
                            Architect: SDG Architects<br />
                            Large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass.</p>
                    </li>
                    <li>
                      <img src="img/project-1_07.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                            Location: Los Altos Hills, CA<br />
                            Architect: SDG Architects<br />
                            Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization.</p>
                    </li>
                    <li>
                      <img src="img/project-1_08.jpg" />
                    </li>
                  </ul>
                </div>
            </div>
            <!-- address -->
            <address>232 SIR FRANCIS DRAKE BLVD</br>
            SAN ANSELMO, CA 94960</br>
            415 721 0905</address>
        </div><!--/row -->
    </div><!--/container -->


    <!-- javaspcript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.flexslider.js"></script>
    <script>
        $(window).load(function() {
          $('.flexslider').flexslider({
            animation: "fade"
          });
        });
    </script>

</body>
</html>

CSS

/* this is a custom css stylesheet */


/* ==========================================================================
   Base Styles, Bootstrap Modifications & Fonts Import
   ========================================================================== */

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.centered {
    text-align: center;
}

.img-centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mt-lg {
    margin-top: 100px;
}

.mt {
    margin-top: 80px;
}

.mb {
    margin-bottom: 80px;
}

.drop {
    margin-bottom: -15px;
}

.spaced {
    margin-left: 37px;
}

.sm-spaced {
    margin-left: 5px;
}


/* ==========================================================================
   General styles
   ========================================================================== */

html, body {
    overflow-x: hidden;
}

body {
    font-family: "proxima-nova", sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

.container {
    width: 100%;
}

a {
    color: #555;
    outline: 0;
}

.strong {
    font-weight: bold;
    font-size: 13px;
}

small {
    color: #555;
}

aside {
    position: absolute;
    top: 0px;
    left: 0px;
}

address {
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    float: right;
    padding: 90px 0px 30px 15px;
    margin-right: 70px;
}

.email {
    color: #6CAA3D;
    font-weight: 400;
}

.info-box {
    float: right;
    text-align: left;
    line-height: 17px;
    font-weight: 400;
    letter-spacing: 2px;
    width: 315px;
    height: 450px;
    padding: 60px 20px 0 15px;
}

.info-box p {
    padding-top: 12px;
}

.info-box h5 {
    padding-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.contact {
    height: auto!important;
    margin-right: 5px;
    width: 315px;
}

.team-box img {
    border: 1px solid black;
    margin-bottom: 30px;
}

/* ==========================================================================
   Navigation styles
   ========================================================================== */

/*
 * Top nav section
 */

.navbar-header {
    padding-bottom: 50px;
}

.navbar-brand {
    margin-left: 0px!important;
}

.navbar .nav {
    text-align: left;
    margin-top: 45px;
}

.navbar .nav > li {
    float: none;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
}

.navbar-default {
    background-color: white;
    border-bottom: 0px;
}

.navbar-default .navbar-nav > li > a {
    color: #555;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .active > a, a:hover, a:active, a:focus {
    color: #6CAA3D;
    background-color: transparent;
    text-decoration: none;
    outline: 0;
}

.navbar-default .navbar-nav > li {
    padding: 0px 15px 15px 15px;
}

.navbar-collapse {
    margin-top: -65px;
    border-top: 0px;
    border-color: none;
}

.navbar-default .navbar-collapse {
    padding-top: 10px;
}

.logo {
    margin-top: 10px;
    height: 100px;
    width: 200px;
}

.navbar-right {
    padding: 15px 20px 0 0;
}

/*
 * Left aside nav
 */

.panel {
    border: 0px;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.0);
    box-shadow: 0 0px 0px rgba(0,0,0,.0);
    margin: 45px 0 0 100px;
}

.panel-title {
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
    color: #555;
    padding-top: 7px;
    padding-bottom: 7px;
    list-style: none;
}

.panel-title a {
    text-decoration: none;
}

.panel-default > .panel-heading {
    background-color: transparent;
    border-color: transparent;
}

.panel-body {
    margin-left: -25px;
    margin-top: -22px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.panel-body ul {
    list-style-type: none;
}

.panel-body ul li {
    padding-top: 10px;
    padding-bottom: 10px;
    letter-spacing: 1px;
}

.panel-group {
    text-align: left;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top:0px;
}

.nav-caret {
    padding-left: 10px;
    font-size: 8px;
}

/*
 * flexslider format
 */

.flexslider{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    margin:0px 0px 0px 0px !important;
}

.flex-direction-nav a  {
    color: #999 !important;
}

/*.flex-next { 
    padding-right: 40px!important;
}*/

.flex-control-nav {
    text-align: right !important;
    padding-right: 70px !important;
}

.flex-control-paging li a {
    color: transparent !important;
}

.nodot .flex-control-paging li a { 
    display: none !important;
}

.flex-control-paging li a.flex-active {
    background: #6CAA3D !important;
}

.right {
    padding-top: auto !important;
    bottom: 0;
    right: 0;
    margin-bottom: 0px;
}

.flex-caption {
    position: absolute;
    text-align: left;
    background:rgba(255, 255, 255, 0.7);
    z-index: 1;
    padding: 20px;
    font-size: 11px;
    width: 300px;
}

.flex-caption p {
    padding-top: 12px;
}

.carousel .slides > li {
    padding-right: 10px;
}


Solution :

for one you should be floating the parent of .flexslider to the right instead of the left.

<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 pull-left">

You have a class called .pull-left added to that so im assuming you can change that to .pull-right. Then you need to remove padding-right: 15px from .container and it should sit against the right side


    CSS Howto..

    HTML/CSS: how to position forms? [closed]

    How to get rid of CSS cascading in internal element widgets

    How do I change the overflow of a single element, while having the overflow of the body hidden?

    How to transform Ruby hash to CSS rule?

    Confusion as to how clearfix actually works

    css - how to get (responsive) li's with the same height when they have a different width?

    CSS how to solve -webkit- functions

    How to Change blue background selection color from image using css

    How could I make a menu dropdown on click

    How to manage css files the best way

    How do I place a
    beside an image?

    How to use javascript to transition a property from a set attribute to a new attribute

    How do I apply CSS to the table generated into another window?

    HTML/CSS | How to place different elements in a header div to different positions?

    How we can add a span to a text inside ul, that is outside of li in jquery or css

    How can I have the text content of a div overflow in a HTML email template?

    How do I achieve my bootstrap nav design?

    How to add media attribute to ASP.NET MVC4 style bundle

    How can I make all table cell sizes the same width in css?

    How to positioning the tooltip above cursor

    Chrome DevTools Converts All HEX Colors to RGB: how to stop?

    How to apply struts2 tags on existing jsp file without affecting its css and js

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    css how to make the background image padding to right

    How to hide classes on some pages in WordPress?

    How to add an image to a custom CSS button

    How to add an additional css class from code behind using ASP.NET?

    HTML - How to do a square plain button while using jQuery Mobile css [closed]

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    How to add a background to text only?