SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IMG and DIV Not Floating Side-by-Side

    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:

    Code:
    .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. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    hope that helps
    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

    EDIT:

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

    Cheers mate


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •