Question

How can I prevent the last div (class) from going under? I put margin-right on .artist_wrap. I thought when I put overflow: hidden it’ll stay inside #music_videos_wrap but it disappears. Thanks to anyone who’ll help me.

HTML:

<div id="music_videos_wrap">
    <div class="artist_wrap"></div>
    <div class="artist_wrap"></div>
    <div class="artist_wrap"></div>
    <div class="artist_wrap"></div>
</div>

CSS:

#music_videos_wrap{
    float:left;
    margin:0 0 0 23px;
    width:944px;
    height: 257px;
    background-color: red;
    /*overflow:hidden;*/
}
.artist_wrap{
    float:left;
    width:190px;
    height:257px;
    background-color: green;
    margin:0 62px 0 0;
}

Answer 1

First of all, you measurements are somewhat wrong, you need the wrapper to be 946px wide to fit the elements you want, alternatively change the width of the .artist_wrap. After fixing that, you could set margin-left:62px to .artist-wrapp instead of the right-margin. That way you could use margin-left:0 on first-child (which is more cross browser than last-child):

.artist_wrap:first-child { margin-left:0; }

See jsfiddle: http://jsfiddle.net/Rkp3Z/