multiple floated divs-overflow hidden, partial view

1 Views

Here’s the set up:

I have a 100% width div that allows for the input of multiple images (this is in wordpress). I have a class set up that floats those images left. The overflow is hidden, but I want the full width to fill up and show only part of the last image.

Read More

The code as it is now works great, but only displays the last image if it fully fits and leaves empty space until the browser window is large enough to take another image. I’m basically setting up a banner that’s a collage of images of equal height, but variably width. He’ll put in enough images so that it’s one continuous banner.

Here’s the css (the class repeats in the id): 

#banner {clear:both;height:250px;width:100%;overflow:hidden;}
.banner-image {float:left;}

thanks for any help!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You can do it like this:

    Html

    <div class="maincontainer">
    <div class="imagecontainer">
        <img class="banner-image" src="somsrc"/>
        <img class="banner-image" src="somsrc"/>
        <img class="banner-image" src="somsrc"/>
        <img class="banner-image" src="somsrc"/>
        <img class="banner-image" src="somsrc"/>
        <!-- add more images here -->
    </div>    
</div>

    CSS

    .maincontainer {
    height:250px;width:100%;overflow:hidden;
}
.imagecontainer {
    width:1000%; /* NOTE very wide div that is overflowing */
    clear:both;
}
.banner-image {
    float:left;
    background:#f00;
    margin-right:3px;
    width:150px;
    height:100px;
}

    Have a look at this fiddle. Depending on your screen width you may have to adjust the size of the browser to see the image clipping.