CODEWITHSUNDEEP
htmlcss-floatoverflowcss
Scott Hallauer
Scott Hallauer

Reputation: 389

Floated div 100% height of parent inline-block div

I am making a simple slideshow and I have got the javascript working very easily. However the layout is not going as well. The current image is display in big with a fixed width of 80% and the height can change to keep its aspect ratio.

The problem with this is that I want the the current image to be displayed in its correct aspect ratio (which it is) and I want the thumbnail bar on the right to have a scrollbar if it overflows this height.

Here is a demo on jsfiddle: http://jsfiddle.net/ZTBNR/1/

Here is the code:

CSS

div.slideshow{
 width: 100%;
 background: #B8B8B8;
 display: inline-block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border: 1px solid #000;
 overflow: hidden;
}
div.slideshow > div.current-slide_wrapper{
 padding: 10px;
 float: left;
 width: 80%;
 display: inline-block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 overflow: hidden;
 border-right: 1px solid #000;
}
    div.slideshow > div.current-slide_wrapper img{
     width: 100%;
     vertical-align: bottom;
     cursor: pointer;
    }
div.slideshow > div.other-slides_wrapper{
 padding: 10px 15px;
 float: right;
 width: 20%;
 height: 100%;
 display: block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 overflow-y: auto;
 overflow-x: hidden;
}
    div.slideshow > div.other-slides_wrapper img{
     border: 5px solid #FFF;
     width: 100%;
     cursor: pointer;
     margin-left: -5px;
    }
    div.slideshow > div.other-slides_wrapper img:hover{
     border: 5px solid #EAEAEA;
    }
    div.slideshow > div.other-slides_wrapper img.current{
     border: 5px solid #000;
    }

HTML

<h3>Screenshots</h3>
<div id="slideshow-1" class="slideshow_wrapper">
 <div class="slideshow">
  <div class="current-slide_wrapper">
   <img class="current-slide" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
  </div>
  <div class="other-slides_wrapper">
   <img class="other-slide current" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
   <img class="other-slide" data-slide="2" src="/path/to/image/website-screenshot2.jpg"/>
   <img class="other-slide" data-slide="3" src="/path/to/image/website-screenshot3.jpg"/>
   <img class="other-slide" data-slide="4" src="/path/to/image/website-screenshot4.jpg"/>
   <img class="other-slide" data-slide="5" src="/path/to/image/website-screenshot5.jpg"/>
  </div>
 </div>
</div>

Upvotes: 0

Views: 2661

Answers (1)

Scott Hallauer
Scott Hallauer

Reputation: 389

I solved it! I set div.slideshow to display: block; position: relative; and div.current-slide_wrapper is no longer floated.

I then set div.other-slides_wrapper to position: absolute; top: 0; right: 0; height: 100%;. This worked perfectly!

Upvotes: 1

Related Questions