Getting images to fit into white box and not float outside of it

Question

How would I go about getting the images on my gallery page into the white box?

Jsfiddle here: http://jsfiddle.net/uuLk4uyq/

HTML

<section class="mainSection" style="width: 100%">
    <h1>Gallery</h1>
    <article class="content">
        <h2>Gallery</h2>
        <ul class="photos">
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
        </ul>
    </article>
</section>

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

Adding

overflow: hidden;

on

.content

put the images on your gallery page into the white box.

Some issues may arise with overflow: hidden;. Like when items outside of that div are hidden or cut off.

Alternativally, you could add <div class="clear"></div> after the last li along with:

.clear{
  clear:both
}

See JSFiddle

A better solution is to add the .clearfix on .content. You don't need the extra markup.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

See JSFiddle

What is a clearfix?

Learn more on http://nicolasgallagher.com/micro-clearfix-hack/

edited May 23 '17 at 11:57

Community

1
1

answered Nov 02 '14 at 00:29

Bruno Calza

2,732
2
23
25

Nice one with the `overflow: hidden`. How does that work? Didn't strike me as a logic solution. – JimmyRare Nov 02 '14 at 00:33
@JimmyRare I did not know why. I knew that worked!. Found a explanation here http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem – Bruno Calza Nov 02 '14 at 00:49

score 0 · Answer 2 · answered Nov 02 '14 at 01:27

0

Another way would be to add display: inline-block on .content

answered Nov 02 '14 at 01:27

Tom Bangham

21
2

score 0 · Answer 3 · answered Nov 03 '14 at 08:48

0

If you want to stretch that white part over your images:

.content {
    background-color:#FFF;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 3% 5%;
    margin-top: 2%;
    height: auto;
    overflow: auto;
}

answered Nov 03 '14 at 08:48

Vnz Dichoso

182
1
2
11

Getting images to fit into white box and not float outside of it

3 Answers3