SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Image hanging out of div

    Hi, I'm trying to get a few images into a news article but the images are over hanging the div that contains them, no matter what I do i cant seem to triger haslayout on the image.

    If anyone could have a look and tell me if I'm doing something stupid I'd be really appreciative.

    Here's the page

    Here's the css for the relevant bits
    Code CSS:
    #news_story {
    	position: relative;
        width: 100%;
        top: 30px;
        margin-bottom: 20px;
        background: #EFEFEF;
    }
     
    #left {
    	position: relative;
    	width: 55%;
    	margin: 0 5% 0 0;
    }
     
    #right {
    	position: relative;
    	float: right;
    	width: 40%;
    	height: auto;
    	background: #e1e1e1;
    	border-left: 1px #fff dashed;
    	border-bottom: 1px #fff dashed;
    }
     
    #news_story img {
    	position: relative;
    	float: right;
    	clear: right;
    }

    Thanks in advance
    James

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Add overflow:hidden; to the parent (can't find where the image is hanging on the page)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cannot see what images are in question either - the only two images are the corner ones with their own style rules, and there does not appear to be a #news_story img {} rule in the css.....

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works on the image but it hides my footer.

    I removed the image as a test, it's back up there now, sorry for the confusion.

    The image in question is on the right hand side of the page and is of a castle.

  5. #5
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i got it sorted, i used your idea Ryan and just pushed the footer back up.

    Thanks for the help

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Then for the footer directly declare overflow:visible;
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that has no effect as the footer (.extra) is within the news_story div.

    At the moment, if there's no image in the news story, the .extra div is rising up (had to pull it back up into view to counteract overflow:hidden on news_story)

    Any ideas how i can get the image and the footer to show, without having to reposition the .extra div as I need it to work even if there's no image.

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A lot of this stems from the relative positioning offset, so get rid of that first. The hidden overflow is not needed on #news_story either :
    Code:
    #main, #support, #archive, #news_story {
    	position: relative;
        width: 100%;
        margin-top: 30px;
        margin-bottom: 20px;
        background: #EFEFEF;
    }
    
    #news_story {
    	
    }
    Next get rid of the absolute position and negative bottom margin from .extra (and the overriding rule), and the negative bottom from .bl :
    Code:
    .extra {
    	height: 20px;
    	width: 100%;
    	clear: both;
    	background: #E1E1E1;
    }
    
    #news_story>.extra{
    	
    }
    
    .bl {
        position: absolute;
        bottom: 0;
        left: 0px;
        z-index: 3;
    }

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Instead you can float the #news_story OR you can use the clearfix
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Instead you can float the #news_story OR you can use the clearfix
    If .extra is not absolutely positioned and has the clear set, there is no need for floating or clearfix - the .extra div does all the clearing needed....

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    :O true I didn't see he had cleared the element. Sorry.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok using your code Centauri, I've managed to get the news pages working with or without an image so a big thankyou.

    I do have a slight problem though, in a few places around the site the .extra div and the .bl corner image are now in the wrong place

    If you look here there are few examples on the one page

    What would be the best way to get these consistant throughout the site?

  13. #13
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the bottom of .bl set to zero, all of the "boxes" where the image is misplaced have a height set (and the wrong height according to content) - remove all those heights and they should fall into place.


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
  •