Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    95
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How to make an aligned image extend div

    Hi everyone, sorry for all the posts about floats and divs but here goes another one. I have a picture right aligned inside a div (http://tstcareertech.org/autobody.html). In FF (and probably a bunch of other browsers) the div container does not respect the height of the image inside it when the content is not as tall as the image. How can I get the container to not collapse below the image?

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    It's called clearing floats. Basically you add overflow:auto; to the div you want to wrap around your floated content.

    Also note:

    Some browsers also need a width or height for the container div.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    alexmel7 (03-04-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again alexmel7

    It should be more like this -
    Code:
    #maincontent {
    background: #000 url(images/learningbg.gif) no-repeat;
    width: 894px;
    overflow: auto;
    }
    In your version, your telling it to be height:340px; which is not tall enough for it's content.
    You need to clear the floats in #wrapper also.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    alexmel7 (03-04-2009)

  • #4
    New Coder
    Join Date
    Dec 2008
    Posts
    95
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for the help again. When I added overflow:auto to the "maincontent" div it was adding scrollbars, so I added it to the "welcome" div, which is the div that most immediately contains the one i want to extend, and this seemed to solve the problem.


  •  

    Posting Permissions

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