<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row gns-slide" style="margin-bottom: 20px; height: 250px; padding:0px;"> <div class="col-sm-8" id="SpecPost" style="padding:0px 0px 0px 10px;"> <a href=""> <img id="" src=""> <div class="" id="SpecPostDesc"> <div id="backopcity"></div> <div id="SpecPostDescInner" style="padding: 10px;"> <h4>The Title</h4> <div> Something else here </div> </div> </div> </a> </div> <div class="col-sm-4" style="padding:0px 10px;" id="NotSpec"> <div class="row" style="padding:0 0 5px 0;"> <div class="col-sm-12" style="margin-bottom: 5px;"> <a href=""> <img src=""> <div class="NotSpecTitle"> Something else here </div> </a> </div> <div class="col-sm-12"> <a href=""> <img src=""> <div class="NotSpecTitle"> Something else here </div> </a> </div> </div> </div> </div>

.gns-slide { margin-top: 15px; } .gns-slide #SpecPost { max-height: 250px; } .gns-slide #SpecPost img{ width: 100%; height: 250px; } .gns-slide #SpecPostDesc { width: 510px; max-width: 100%; position: absolute; margin-top: -100px; color: #fff; height: 100px; overflow: hidden; z-index: 555; font-size: 90%; } .gns-slide #SpecPostDesc #backopcity { width: 508px; max-width: 100%; background: #444; height: 100px; opacity: 0.5; position: absolute; z-index: -1; height: 100px; } #SpecPostDescInner h4 { padding: 0px; margin: 0px; } /* */ .gns-slide #NotSpec { max-height: 250px; overflow: hidden; } .gns-slide #NotSpec img{ height: 125px; max-height: 125px; width: 100%; } .NotSpecTitle { position: absolute; color: #fff; margin-top: -50px; height: 50px; overflow: hidden; padding: 5px; opacity: 0.7; background: #444; width: 240px; word-spacing: break-word; }