Creating a horizontal image portfolio with fit-to-div image heights?

Question

I'm building a horizontal-scrolling photo portfolio. It's set up as 3 layers of content: A fixed-position horizontal top menu, a fixed-position horizontal copyright/contact bottom bar, and the content fit in between them. Think:
MENU (fixed)
HORIZONTAL SCROLL OF CONTENT CONTENT CONTENT CONTENT
BOTTOM (fixed)

There should be a horizontal scroll bar, but I'm trying to make there be no vertical scroll. The maximum height of the content in the middle should be 100%, minus the top div and the bottom div. Normally, this isn't an issue, but when that middle content is a bunch of images, I start having problems. I can't seem to get the images to resize to fit the middle div as bound by the top+bottom boxes. So: If screen size height=100%, then the middle div should be ((100%-(top div + bottom div)).
As far as the horizontal scroll goes, I've used two methods: One is to set the middle div to a very large width (which often means if I resize the window, there'll be a lot of extra whitespace left over); Two by making the images fit into a list, and have the list overflow and stretch the div as far as it needs to go. Neither technique has worked correctly for me though.

So: how would I create that center div and get my images to resize and not overflow the window vertically, but to overflow and stretch the window horizontally?

HTML:

<!-- TOP HEADER -->
<div class="header">
        <div id="button">
            <img src="../../images/headers/rk-button.png" alt="" />
        </div> 
        <div class="header-navbar">
            <span class="smalltype">Photos // stuff stuff stuff menu menu menu</span>
        </div>
    </div>

<!-- PHOTOS CONTAINER -->
    <div class="photocontainer">
    <ul class="photolistul">
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk1.jpg" alt="" /></div></li>
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk4.jpg" alt="" /></div></li>
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk2.png" alt="" /></div></li>
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk5.png" alt="" /></div></li>
        <li class="photolistli"><div class="photocontainer1"><img class="photo" src="Swnk6.png" alt="" /></div></li>
    </ul>
    </div>

<!-- BOTTOM MENU -->
<div class="bottommenu">
    <p class="smalltype" style="margin-left:25px;">All photos & work  = blah blah blah text text</p>
</div>

And the CSS:

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 110px;
    width: 100%;
    background-color: #fff;
    z-index:9;
}
.photocontainer{
    position: relative;
    display:inline;
    float:left;
    top:110px;
    margin:0px;
    padding:0px;
    left:0px;
    bottom:45px;
    white-space:nowrap;
}
.photocontainer1 {
    position:inherit;
    max-height:100%;
    max-width:100%;
}
ul.photolistul {
    display:inline-block;
    list-style:none;
    overflow:scroll;
    overflow-style:auto;
    overflow-x:show;
    overflow-y:hidden;
    white-space: nowrap;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    max-height:100%;
    margin-left:110px;
}
.bottommenu{
    position:fixed;
    bottom:0px;
    left:0px;
    height:45px;
    width:100%;
    background-color:#FFFFFF;
}

UPDATE

So, I went back into my code and figured out how to make the photocontainer div stretch to width, horizontally, as well as how to get the images to resize correctly to the container div. However, the max-height:calc(100% - 145px) (along with necessary vendor prefixes) doesn't seem to be working for me on Firefox or IE (worked perfectly in Chrome though).

Can someone take a look at the new code and see what I'm doing wrong?
(Oh, and I ran it through a validator (css3, no less!) that returned "Value Error : max-height Parse Error - 155px)" regarding my use of calc() functions. I also tried using calc() on regular height: css, but no luck getting it to work with IE or Firefox. Anyway, the code is:

CSS

.photocontainer{
    position: relative;
    display:inline;
    float:left;
    top:110px;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
}
.photocontainer1 {
    position:inherit;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    max-width:100%;
    padding:0px;
    margin:0px;
}
ul.photolistul {
    display:inline-block;
    max-height:calc(100% - 155px);
    list-style:none;
    overflow:scroll;
    overflow-style:auto;
    overflow-x:hidden;
    overflow-y:hidden;
    white-space: nowrap;
    padding:0px;
    margin:0px;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    height:100%;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    margin-left:110px;

}
img.photo {
    position: relative;
    float:left;
    margin:0 auto;
    height:100%;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    margin-left:110px;

HTML

<div style="max-height=100%">
<div class="header">
<div class="header-navbar">
        NAVBAR TEXT GOES HERE
    </div>
</div>
<div class="photocontainer">
<ul class="photolistul">
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw000.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw007.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw008.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw009.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw005.jpg" alt="" /></div></li>
    <li class="photolistli"><div class="photocontainer1"><img class="photo" src="bw006.jpg" alt="" /></div></li>
</ul>
</div>

<div class="photocount">
<p class="smalltype" style="margin-left:25px;">LOTSA FOOTER TEXT</p>
</div>
</div>

score 0 · Answer 1 · answered Jan 08 '14 at 16:39

0

You could use jQuery to get the window/screen size, and then set the height of the images (are all the images the same size/proportion?). Set the width to 'auto' on your css

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

answered Jan 08 '14 at 16:39

agueric

39
6

Would it be possible to do this without jQuery? I found a calc() function that I can use in CSS that seems to do what I need it to... – sharedphysics Jan 10 '14 at 15:35
You could, but you need to set the width first (e.g. width:98%;) and then the width with the calc() function in case someone uses a non-compatible browser. I'm not sure if that would work for your needs, i haven't personally used the calc() function extensively, I always go for jQuery. The errors shown on the validator are a known bug on W3C https://www.w3.org/Bugs/Public/show_bug.cgi?id=18913 – agueric Jan 11 '14 at 18:04
On your html, you should change:
for
– agueric Jan 11 '14 at 18:12
Thank you for the catch there! – sharedphysics Jan 16 '14 at 04:09

Creating a horizontal image portfolio with fit-to-div image heights?

1 Answers1