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..

    In CSS, how to toggle the tab color if it was selected (without using javascript)

    How can I add CSS and JS in Symfony2?

    How to make text wrap nicely below start of first line

    How to get a CSS animation to run through the correct steps

    How to fix the Wordpress (Twenty Eleven) CSS Menu Alignment?

    How to Rotate Text and have it's Parent Div act Dynamically

    How to align floated elements to the bottom of their container

    How can I keep percentage-based elements from overlapping?

    How to show one element when click on the another element with css?

    How to apply a css class for jqGrid height property setGridHeight?

    How is padding-top as a percentage related to the parent's width?

    HTML/JavaScript - How can I hide the links and cursor?

    How to Create a CSS3 Animated Circle that chages colors when clicked?

    How to set jquery ui icon as background image per css?

    How to achieve this awesome CSS animation

    How to center an input tag in fieldset when using codeigniter?

    How to align links on top of each other inside of a box with CSS?

    How to remove space between bootstrap columns?

    How can I remove borders around images on Blogger? [closed]

    How many digits after the decimal point are interpreted in stylesheet rules?

    How to keep links and hover effects on my icon-fonts isolated with CSS

    How to override default CSS in cakePHP 1.3?

    How to Troubleshoot CSS?

    How do I vertical center text next to an image in html/css?

    html,css.php? help how output my form subissions into webpage instead of text file?

    How to get css div to stretch to 100% of window

    Buttons on bootstrap timepicker is not showing

    ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

    How can I get drop-down functionality working with CSS?

    How to center a span element in CSS? [closed]