Float Issue - Divs Drop When Width is Greater than Page Width

Question

Abbreviated code is below; live on site is here: http://www.nwitimes.com/app/100objects/index.php . Code had 100 images, but I shortened it to 10 for the sake of brevity.

What I want to happen is for the images with the class .picholder to be on the right side of the screen, filling in all of the white space. What happens is that if I don't have a float on them, then they stack 100 images tall. If I add float:left to .picholder, the images tile like I want as long as one doesn't reach the edge of the page. However, if I have seven+ images, they all drop under the div on the left. (This div will hold a form, but I put an image in as a placeholder.)

I've tried giving widths to the divs, but that didn't work. When finished, the form (left side) will be 350px wide, while the picside takes up the rest of the page. If the small images also go under the form, that is fine. I just don't want them all there.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container {width:100%;}
#formside {float:left; margin:0 50px 50px 0;}
#picside {float:left;border:5px solid #cfc;}
.picholder {width:150px; background-color:#EFEFEF; text-align:center; padding:5px; border:1px solid #DDD; height: 100px;}
</style>
</head>
<body>
<div id="container">
<div id="formside">
<img src="bigs/001.jpg" width="620" height="419">
</div>
<div id="picside">
<div class="picholder"><img src="smalls/001.jpg" width="148" height="100"></div>
<div class="picholder"><img src="smalls/002.jpg" width="147" height="100"></div>
<div class="picholder"><img src="smalls/003.jpg" width="67" height="100"></div>
<div class="picholder"><img src="smalls/004.jpg" width="150" height="100"></div>
<div class="picholder"><img src="smalls/005.jpg" width="143" height="100"></div>
<div class="picholder"><img src="smalls/006.jpg" width="150" height="100"></div>
<div class="picholder"><img src="smalls/007.jpg" width="149" height="100"></div>
<div class="picholder"><img src="smalls/008.jpg" width="70" height="100"></div>
<div class="picholder"><img src="smalls/009.jpg" width="150" height="100"></div>
<div class="picholder"><img src="smalls/010.jpg" width="125" height="100"></div>
</div>
</div>
</body>
</html>

I know there are a thousand float questions on this site, and I've read a ton of them. I haven't found a similar situation. Thanks for any help.

Answer 1

I had success by setting percentage widths for each of your main elements: .formside and .picside . I chose percentages (60% and 40%) that add up to 100%.

I had to adjust some other CSS, mainly adding box-sizing:border-box to adjust the box model so that padding and borders won't affect the width of elements.

Here, I changed margin to padding and added width and box-sizing :

#formside {
    float: left;
    padding: 0 50px 50px 0;
    width: 40%;
    box-sizing: border-box;
}

Here, I added max-width to the image so that it will shrink with #formside but not expand past its native width:

#formside img {
    max-width:100%;
}

Here, I added width and box-sizing :

#picside {
    float: left;
    border: 5px solid #cfc;
    width: 60%;
    box-sizing: border-box;
}

And I re-floated all of the .picholder elements:

.picholder {
    width: 150px;
    background-color: #EFEFEF;
    text-align: center;
    padding: 5px;
    border: 1px solid #DDD;
    height: 100px;
    float: left;
}

WORKING EXAMPLE

Edit:

After reading your question again, this might be an simpler example (although perhaps less pretty). Simply float .formside to the left and remove .picside , allowing all the .picholder elements to wrap around .formside .

WORKING EXAMPLE

Edit:

Actually, it's significantly simpler if the width of the left side is fixed. Just float the left side and give margin-left to the right side equivalent to (or greater than) the width of the left side:

#formside {
    float: left;
    width: 350px
}
#formside img {
    max-width:100%;
}
#picside {
    margin-left:400px; /* Gives a 50px margin between left and right */
}

WORKING EXAMPLE

Float Issue - Divs Drop When Width is Greater than Page Width

Question

1 answers

solution1
1 ACCPTED 2014-10-09 23:19:40

Edit:

Edit:

Float Issue - Divs Drop When Width is Greater than Page Width

Question

1 answers

solution1 1 ACCPTED 2014-10-09 23:19:40

Edit:

Edit:

solution1
1 ACCPTED 2014-10-09 23:19:40