CODEWITHSUNDEEP
htmlcss
Hunter
Hunter

Reputation: 458

Images Fall Out of Div When Floated

I have many images in this section of my website, and need the to stack into two columns.

I have the widths all correct and the margins, and it looks real nice! However, as soon as I added the float: left to the images, some things went wrong.

I have a border at the bottom of each section of content, and the images fall below that border when I float them. I have tried changing the display modes and some other things but I have no clue what is wrong.

Here is a JSFiddle for my code.

Upvotes: 0

Views: 142

Answers (2)

user3512904
user3512904

Reputation:

Position the parent of the images (I suggest a div) as relative and add overflow:auto.

CSS file:

.content{
    position:relative;
    overflow:auto;
}
.data_files{
    float:left;
}

HTML:

<div class="content">
    <div class="data_files>
        /*here your photos*/
    </div>
</div>

Upvotes: 0

Josh Rutherford
Josh Rutherford

Reputation: 2723

You need a clearfix on the section that wraps the images. Try Nicolas Gallagher's micro clearfix.

Upvotes: 3

Related Questions