Border does not extend past floated elements?

Question

I have the following code to present a set of images. The images are filtered by date and they include a caption underneath. Pictures are placed as a grid on next to other. The code

html

<!doctype html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <title>Images</title>
</head>
<body>
    <div class="date-group">
        <div class='date-title'>
             13/02/2014
        </div>
        <div class="date-content">
            <div class="img-thumb float">
                <a href="../images/bold.jpg">
                    <img src="../images/bold.jpg">
                    <span class="caption">A big caption that might be going in more than one lines</span>                

                </a>
            </div>
            <div class="img-thumb float">
                <a href="../images/bold.jpg"><img src="../images/bold.jpg"></a>
                <span class="caption">A caption</span>                
            </div>
            <div class="img-thumb float">
                <a href="../images/bold.jpg"><img src="../images/bold.jpg"></a>
                <span class="caption">A caption</span>                
            </div>
            <div class="img-thumb float">
                <a><img src="../images/bold.jpg"></a>
                <span class="caption">A caption</span>                
            </div>
            <div class="img-thumb float">
                <a><img src="../images/bold.jpg"></a>
                <span class="caption">A caption</span>                
            </div>
        </div>
    </div>
</body>
</html>

css

div.date-group {
    text-align: center;
    border: 1px solid black;
}

.date-group img{
    width:100px;
    height:100px;
}

.img-thumb{
    width:100px;
    text-align: center;
}
.date-group span{
    display: block;
}

.float{
    float: left;
}

.date-title{
    height:20px;
    border-bottom:1px solid black;
    margin-bottom: 10px;
}
.date-content{
    margin-right: 10px;
    min-height: 150px;

}

Here is the fiddle. My problems is that the border does not grow as the caption might grow when it wraps to more than one line. Also will this code won't make images go to second and third row if the first one is full. How can I change those two things (the border growing and .img-thumb float to change row when not enough space. Also keep in mind that these images will populate the page automatically(if it is possible) within a for in a django template

It is because of this -> http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504 .... and here's a fixed version -> http://jsfiddle.net/jkPR7/3/ — Mr. Alien, Feb 18 '14 at 08:06
You could just put `overflow: hidden;` on `div.date-group `. This will fix the border. [DEMO](http://jsfiddle.net/Ruddy/jkPR7/5/) — Ruddy, Feb 18 '14 at 08:07
@Mr.Alien Na its not, that's fine! Quick and easy, I have never ran into a problem using this method. — Ruddy, Feb 18 '14 at 08:10
Thanks for answering. The problem with all methods answered (overflow, table-cell etc) is that when the image changes row it wont go underneath the first, becuase its caption is wrapped in more than one line. It goes next to it. How to deal with that? I should probably give a max-width correct? — Apostolos, Feb 18 '14 at 08:15
@Mr.Alien Like I said I have never run into a problem with it. — Ruddy, Feb 18 '14 at 08:20

eweb · Answer 1 · 2014-02-18T08:16:41.183

2

you should use this css

.date-content {
    margin-right: 10px;
    min-height: 150px;
    overflow: auto;
}

fiddle

edited Feb 18 '14 at 08:16

answered Feb 18 '14 at 08:11

eweb

21
3

1

Thank you for answering, but now when image goes to next row it will gow next to the big caption and not under it. – Apostolos Feb 18 '14 at 08:22

score 2 · Accepted Answer · answered Feb 18 '14 at 08:37

2

@Apostolos try this one:

.float{ display: inline-block; }

Fiddle

answered Feb 18 '14 at 08:37

Ismatjon

1,149
1
8
17

It seems that you are a life saver. Why did i need it that. Could you please explain? – Apostolos Feb 18 '14 at 08:39
div elements by default are block elements, meaning that they are going to block entire horizontal space, so when you make them display: inline-block than they are not going to take the whole space. So this way img-thumb elements are going to be next to each other. – Ismatjon Feb 18 '14 at 08:42
It doesn't seem to work when I use it in my actual code. – Apostolos Feb 18 '14 at 08:43
and if you wanna remove space between img-thumb use this one: [demo](http://jsfiddle.net/jkPR7/25/) – Ismatjon Feb 18 '14 at 08:44
Works in fiddle but not in my code on chrome. Did u change sth else in code?Sometimes I just hate CSS :).EDIT Works in my actual Code, probably something i did :)!! Thank you!! – Apostolos Feb 18 '14 at 08:46

score 1 · Answer 3 · answered Feb 18 '14 at 08:13

1

you can add div.date-group {display: inline-block;} http://jsfiddle.net/jkPR7/11/

answered Feb 18 '14 at 08:13

user2167382

346
1
3
14

Here also, Image places itself next to the image with the big caption and underneath when changing row and not exactly under it. – Apostolos Feb 18 '14 at 08:28

score 1 · Answer 4 · answered Feb 18 '14 at 08:14

1

http://jsfiddle.net/jkPR7/12/

That's all

.date-group span{
    display: table-cell;
}

.date-content{
    margin-right: 10px;
    min-height: 150px;
    display: table;
}

answered Feb 18 '14 at 08:14

tom10271

4,222
5
33
62

The same, when image goes to next row, it will place itself next to the big caption and not under it – Apostolos Feb 18 '14 at 08:27

score 1 · Answer 5 · answered Feb 18 '14 at 08:43

1

try adding this to your CSS:

.date-content:after {
    content: "";
    clear: both;
    display: block;
}

Edited fidle: http://jsfiddle.net/jkPR7/27/

Learn more http://css-tricks.com/all-about-floats/

answered Feb 18 '14 at 08:43

Simas Skilinskas

141
1
1
5

Border does not extend past floated elements?

5 Answers5

Linked