Question

I don’t know why this is happening.

I have this code here.

It works fine but “sometimes” (and many times in a row) for no apparent reason, this happens:

To all the .box class.

Sorry I have to share “all” my code but I have no idea why this is.

This is what it should look like:

I don’t know if this is usual but id you want, you can download the two files from here (HTML and CSS + Images) because in jsfiddle seems to work all of the times,

I don’t know whether it matters or not but I’m using chrome (latest) on a mac.

EDIT: I seems to work fine in safari every time.

Thanks in advance!! Please ask for any clarification needed!

---

By the way my title is absolutely horrible, sorry! but I have no idea what the problem is so I can’t really describe it, feel free to edit or comment any suggestion.

Answer 1

On your style.css

1. Remove overflow:hidden on #container
2. Set overflow:hidden to the .box
3. Set float:left to the .box img
4. Set float:right to the .follow

new

#container {
    height:100%;
    width:520px;
    position:relative;
    left:50%;
    margin:20px 0 0 -250px;
}
.box {
    border:1px solid gray;
    height:200px;
    width:500px;
    float:left;
    margin:0px 0 20px 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow:hidden;
}
.box img {
    width:140px;
    height:140px;
    margin: 15px 0 0 15px;
    float:left;
}
.follow {
    /*outline:1px solid red;*/
    height:80px;
    width:260px;
    float:right;
    margin:25px 30px 0 0;
}