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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Div does not expand to fit pictures.

    I got a problem with some pictures which are floating outside the div / the div is not expanding as it should do.
    Problem does occour in FF and not IE6.

    If you go here: -removed url- and scroll to the bottom you'll see what I mean: The two 'valid-images' are floating outside the background, at least it looks like that. But they SHOULD be contained in the div = the background should expand to fit them, but it doesn't.

    The relevant code:

    Xhtml:
    Code:
    ---more code above this---
    <div id="footer">
    Copyright &copy; Behrentzs | 2008 | All rights reserved<br/><br/>
    
    There are 0 registered members and 1 guests viewing the site.<br/><br/><img src="images/css.png" alt="Valid CSS" /><img src="images/xhtml.png" alt="Valid XHTML" />
    </div>
    <div class="clear"></div>
    </div>
    Css:
    Code:
    #footer {		                         width:920px;
    				height:23px;
    				float:left;
    				text-align:center;
    				margin-top:6px;
    				line-height:7px;
    				font-size:9px;
    				font-weight:bold;
    				}
    
    .clear {		                          clear:both; 	/*Clearing floats to fix layout*/
    				font-size:0px;
    				}
    Last edited by CaptainB; 05-15-2008 at 03:56 PM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Seems OK here.

    Frank
    Attached Thumbnails Attached Thumbnails Div does not expand to fit pictures.-screenhunter_01-may.-15-15.27.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    No it doesn't. This is how it should look:
    Attached Thumbnails Attached Thumbnails Div does not expand to fit pictures.-untitled-1.jpg  

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    effpeetee, if you look at the bottom the two validated images are sneaking past the container just a bit.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is at 400&#37; in IE7 on my PC

    Frank
    Attached Thumbnails Attached Thumbnails Div does not expand to fit pictures.-screenhunter_02-may.-15-15.36.jpg  
    Last edited by effpeetee; 05-15-2008 at 03:44 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Pete, as Jsd said, the images are still sneaking out of the div. Look at the screen I posted - that's how it should look. But unfortunately it only does in IE6.

  • #7
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts
    take the height off the footer.. ure telling to stay that height
    "I have not failed, I've found 10,000 ways that don't work" Thomas Edison

  • Users who have thanked maxvee8 for this post:

    CaptainB (05-15-2008)

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Sorry. I can't see any difference, but I only have IE7

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    How do you expect the footer to contain those buttons when the content inside it exceeds 23px in height? Also why are you floating the footer? No need for the height and no need to float it. This works
    Code:
    #footer {		width:920px;
    
    				text-align:center;
    				margin-top:6px;
    				line-height:7px;
    				font-size:9px;
    				font-weight:bold;
    clear:both;
    				}
    BTW the buttons were poking out in Firefox 3 Beta 5 as well.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    CaptainB (05-15-2008)

  • #10
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    WHY didn't I think of that! Of course it was the height that caused the issue. Changed it to +45px and it worked out.

    Thanks all!

    EDIT: Removed the height completely, fixed the problem aswell.
    Last edited by CaptainB; 05-15-2008 at 03:55 PM.

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Frank, only fixed it @localhost so far.


  •  

    Posting Permissions

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