IMG and DIV Not Floating Side-by-Side

HTML & CSS
1

Hey all,

I’ve got an issue where an image and div are not floating side-by-side. Instead the div is loading below the image and falling outside of the main div that both elements are wrapped in.

Here is a jsfiddle illustrating the problem: http://jsfiddle.net/7DXNq/1/

Setting a fixed width or % to the div or p element resolves the issue but I don’t like that fix.

Is it because there is no width on the ‘notice-wrap’ div and therefore the inner div (notice-content) can’t calculate the end point and therefore forces full width?

Thanks,
Ben

2

you dont really need to float the div AND the image. Floated elements are best given explicit width, otherwise they will shrink wrap to the width of their content. Since your div has long text, this is 100% of the container. BTW, the AP’ing was not a good idea either.

Try this strategy instead:


.notice-wrap {
    float: left;
    clear: both;
    margin: 4px 0;
    
    background: #eee;
}

.notice-wrap img { float: left; display: inline; width: 185px; }
.notice-content {overflow:hidden;}
.notice-content .date { float:right;  background: #d1d1d1; padding: 4px 8px; font-size: 10px; }
.notice-content h4, .notice-content p { padding: 4px; }
.notice-content h4{float:left;}
.date+ p{clear:both;}

hope that helps

3

Ahh - thanks dude. With that in mind it seems as though I didn’t have to assign anything to that div at all.

Have removed the code and everything wraps around the image perfectly.

Thanks again :slight_smile:

EDIT:

Sorry yes I do need overflow in there to manage the way the p element interacts with the floated img.

Cheers mate