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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts

    Div closing before it should

    I have a gallery (3 by x size) and no matter how many images the containing div always closes before the last line. Heres the source code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Gallery</title>
    
    <style>
    body
    {
    	margin:0;
    	padding:0;
    }
    /*img {
    border:solid 5px white;
    border-bottom-width:20px;	
    }*/
    .imgCont {
    	
    	background-color:#333;
    	float:left;
    	margin:5px 5px;
    }
    </style>
    </head>
    <body>
    <div style="width:800px;margin:0 auto;background-color:#999;">
    
    <div id='galleryCont' style='width:780px;margin:0 auto;'>
    
    <div class="imgCont" style='width:250px;height:250px;'>
    <img src="../photos2/1.jpg" style="margin:0px 41.6666666667px" width="166.666666667" height="250" /></div>
    
    <div class="imgCont" style='width:250px;height:250px;'>
    <img src="../photos2/10.jpg" style="margin:0px 41.6666666667px" width="166.666666667" height="250" /></div>
    <div class="imgCont" style='width:250px;height:250px;'>
    <img src="../photos2/11.jpg" style="margin:0px 51.25px" width="147.5" height="250" /></div>
    
    <div style='clear:both;'></div>
    
    <div class="imgCont" style='width:250px;height:250px;'>
    <img src="../photos2/12.jpg" style="margin:0px 41.6666666667px" width="166.666666667" height="250" /></div>
    <div class="imgCont" style='width:250px;height:250px;'>
    <img src="../photos2/13.jpg" style="margin:0px 39.5833333333px" width="170.833333333" height="250" /></div>
    <div class="imgCont" style='width:250px;height:250px;'>
    <img src="../photos2/14.jpg" style="margin:0px 41.6666666667px" width="166.666666667" height="250" /></div>
    
    <div style='clear:both;'></div>
    
    <div class="imgCont" style='width:250px;height:250px;'>
    
    <img src="../photos2/15.jpg" style="margin:0px 41.6666666667px" width="166.666666667" height="250" /></div>
    </div></div>
    
    </body>
    </html>
    and this is how it shows up. Can anyone help me figure out why?
    Last edited by tomharto; 04-23-2011 at 02:09 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
    We really need to see all your code including Doctype.

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

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts
    full code added to the first post

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    no matter how many images the containing div always closes before the last line
    Not sure what this means?

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by tomharto View Post
    full code added to the first post
    the pairs <div>,</div> are ok the only problem could be in how you put the contents of div inside other divs.
    can you post a link to a test page?

    Edit:
    i just discover, add this:
    Code:
    <div id='galleryCont' style='width:780px;margin:0 auto; overflow: auto;'>
    or add another:
    Code:
    <div style='clear:both;'></div>
    before you close div with id galleryCont


    not related with your current problem but are validation problems.
    this:
    Code:
    <style>
    must be:
    Code:
    <style type="text/css">
    but is better to move css in an external file.

    also, you need to add a alt attribute to each img element.

    best regards
    Last edited by oesxyl; 04-23-2011 at 03:14 PM.

  • Users who have thanked oesxyl for this post:

    tomharto (04-23-2011)

  • #6
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Im gonna put it in an external page i just put it there for the time being =P.

    Heres a link to the actual page

    http://todieamartyr.co.uk/functionsPHP/OOPTest/

    The gallery is built using a PHP Class (See here for the code http://www.codingforums.com/showthread.php?t=224977)


    EDIT:Added the overflow and it works great thanks

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by tomharto View Post
    Im gonna put it in an external page i just put it there for the time being =P.

    Heres a link to the actual page

    http://todieamartyr.co.uk/functionsPHP/OOPTest/

    The gallery is built using a PHP Class (See here for the code http://www.codingforums.com/showthread.php?t=224977)
    is my fault, i just try to not have too much posts and i edited my previous post before you post this. Is a problem of clearing floats, see my post,

    best regards

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by tomharto View Post
    Im gonna put it in an external page i just put it there for the time being =P.

    Heres a link to the actual page

    http://todieamartyr.co.uk/functionsPHP/OOPTest/

    The gallery is built using a PHP Class (See here for the code http://www.codingforums.com/showthread.php?t=224977)


    EDIT:Added the overflow and it works great thanks
    you already clear floats using the <div style='clear:both;'></div>, so adding overflow: auto is another way to do same thing.
    you could to this in your way adding another <div style='clear:both;'></div> after the last picture and not using overflow: auto.

    best regards

  • #9
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Okay ill try both ways, the more ways i know the better i say :P


  •  

    Posting Permissions

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