Div closing before it should

tomharto

04-23-2011, 01:02 PM

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
<!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?
http://todieamartyr.co.uk/files/galleryerror.jpg

effpeetee

04-23-2011, 01:06 PM

We really need to see all your code including Doctype.

Frank

tomharto

04-23-2011, 01:09 PM

full code added to the first post

AndrewGSW

04-23-2011, 02:01 PM

no matter how many images the containing div always closes before the last line

Not sure what this means?

oesxyl

04-23-2011, 02:07 PM

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?

i just discover, :) add this:

<div id='galleryCont' style='width:780px;margin:0 auto; overflow: auto;'>

or add another:
<div style='clear:both;'></div>
before you close div with id galleryCont

not related with your current problem but are validation problems.
this:

<style>

must be:

<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

tomharto

04-23-2011, 02:17 PM

oesxyl

04-23-2011, 02:19 PM

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

oesxyl

04-23-2011, 02:23 PM

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

tomharto

04-23-2011, 02:31 PM

Okay ill try both ways, the more ways i know the better i say :P