Div Container not containing!

Forum Moderators: not2easy

Message Too Old, No Replies

Div Container not containing!

danthach

4:12 am on Dec 28, 2007 (gmt 0)

I am trying to created thumbnails nested inside a container, but the cotainer isnt containing the objects, and the thumbs are laying outside of the "gallery" container. My docutype is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I've tried to use the "clear: left;" technique, but it did not work. Thanks for your help!

CSS code:
#gallery {
border:1px solid #888;
text-align: left;
background-color:#fff;
width: 530px;
padding: 10px;
}
#gallery ul.thumbs {
margin: 0 auto;
list-style: none;
}
#gallery .thumbs li {
float: left;
}

HTML code:
<div id="gallery">
<ul class="thumbs">
<li><img src="asd.jpg"></li>
</ul>
</div>

danthach

5:01 am on Dec 28, 2007 (gmt 0)

Still have one question though. I used the first technique of using <div style="clear: both;"></div>
to keep objects inside the container. But, I had to do that everytime I wanted the thumbnails in a new row. My thumbs still overflowed horizontally, <div style="clear: both;"></div> only corrected the problem vertically. So the question is, why would I use float in the first place, if I still have to tell the thumbs what row to rest in.

Here is my new code:
<div id="gallery">
<li><a class="thumbs" href="hayride/portrait12.jpg" rel="lightbox[photos]" title="Roll over and click right side of image to move forward. Roll over and click left side of image to move backward."><img src="hayride/portrait_thumb12.jpg"></a>
<li><a class="thumbs" href="hayride/portrait12.jpg" rel="lightbox[photos]" title="Roll over and click right side of image to move forward. Roll over and click left side of image to move backward."><img src="hayride/1thumb.JPG" height=100></a>
<li><a class="thumbs" href="hayride/portrait12.jpg" rel="lightbox[photos]" title="Roll over and click right side of image to move forward. Roll over and click left side of image to move backward."><img src="hayride/3thumb.JPG" height=100></a>
<li><a class="thumbs" href="hayride/portrait12.jpg" rel="lightbox[photos]" title="Roll over and click right side of image to move forward. Roll over and click left side of image to move backward."><img src="hayride/5thumb.JPG" height=100></a>
<li><a class="thumbs" href="hayride/portrait12.JPG" rel="lightbox[photos]" title="Roll over and click right side of image to move forward. Roll over and click left side of image to move backward."><img src="hayride/7thumb.JPG" height=100></a>
<div style="clear: both;"></div>
<li><a class="thumbs" href="hayride/portrait12.jpg" rel="lightbox[photos]" title="Roll over and click right side of image to move forward. Roll over and click left side of image to move backward."><img src="hayride/DSC_0201thumb.jpg" height=100></a>
<li><a class="thumbs" href="hayride/portrait12.jpg" rel="lightbox[photos]" title="Roll over and click right side of image to move forward. Roll over and click left side of image to move backward."><img src="hayride/DSC_0212thumb.jpg" height=100></a>
<li><a class="thumbs" href="hayride/portrait12.jpg" rel="lightbox[photos]" title="Roll over and click right side of image to move forward. Roll over and click left side of image to move backward."><img src="hayride/DSC_0295thumb.jpg" height=100></a>
</p>
<div style="clear: both;"></div>
</li>
</ul>
</div>

lavazza

7:52 am on Dec 28, 2007 (gmt 0)

Before focusing on the finer points of your presentation (CSS), you might want to validate your content: [validator.w3.org...]

And maybe consider an HTML4.0 DOCTYPE rather than XHTML (seeing as though you aren't extending HTML)

rocknbil

7:13 pm on Dec 28, 2007 (gmt 0)

Welcome aboard danthach, this was a particularly tough issue for me that I concluded with the following:

1. You can "contain" floated elements by floating the parent element. A floated parent will always "shrink wrap" or contain it's children.


 <div style="width: 100%; float: left;">
 <div style="float: left; width: 28%;">Some div</div>
 <div style="float: left; width: 28%;">Some div</div>
 <div style="float: left; width: 28%;">Some div</div>
 </div>

2. You can "contain" floated elements by adjusting the overflow property, but this may create some odd issues if the content actually has to overflow:

3. As you've done, you can force a div to contain it's children by placing a clearing div below the last element:

Here is the problem with #3. Not only does it add extra code to your document, it may clear to elements you wouldn't expect. For example, if you have a three column layout and the thumbnails are in the center column, your first clear will clear all the way to the bottom of the left column, leaving nothing but white space above. UCK!

For your solution, I would use #1, it will make it more portable to various conditions than #2 or #3. Float the parent left, then float your UL's left as well, removing margins and padding as needed.

And I agree with the doctype, as long as it is a valid doctype there is no reason to use XHTML unless you require features only present in XHTML. It will make life a lot easier.