Images Breaking Out My gallery images break out of div

[BooZker 0]

OK so I want to put the images on:

http://forums.xisto.com/no_longer_exists/ (long URL for testing)

inside the div with the yellow dashes (put those there just until I can get the images inside)

I don't know why they are breaking out though. It's most likely to do with the float: left. I tried the clear:both but that does nothing. I want it to look just like that, but inside my div with the yellow dashes. All the CSS for the gallery images is at the bottom of my style sheet found here:

http://forums.xisto.com/no_longer_exists/

Take a gander and see if you know how to fix it. I have been trying to fix this for a couple days now, so ANY help would be great.

UPDATE: Just noticed it does it with this also:

http://forums.xisto.com/no_longer_exists/

Maybe a block element problem? Maybe not a problem with floats, but ul and li? Because the gallery is made from an ul.

Edited August 6, 2007 by BooZker (see edit history)

[jlhaslip 4]

Had a quick peek.

Find :

<p class="main_text"/>

and remove the slash at the end of that tag. The paragraph is closing because of the slash. Might be the problem. (?) Post back if it doesn't work.

*edit*

Just an idea, but if you are planning to attract potential customers from this site, I would consider changing your Myspace user name, or start a new page on Myspace. That name you are using now will really not present a good image for the client to see. Must be a story to be told about that one...

[BooZker 0]

I'm at work so i can't tell you the story behind the username, but i will on the next post!I actually just got rid of that p tag. I don't need it. That was leftover from the template. I only need that UL. And it still isn't working... any ideas?

[truefusion 3]

It is 'cause it is floating to the left. Suggestion: Instead of this:

<ul><li><a><img></a></li><li><a><img></a></li><li><a><img></a></li><li><a><img></a></li><li><a><img></a></li><li><a><img></a></li></ul>

Do this:

<ul><li><a><img></a></li><li><a><img></a></li><li><a><img></a></li></ul><ul><li><a><img></a></li><li><a><img></a></li><li><a><img></a></li></ul><ul><li><a><img></a></li><li><a><img></a></li><li><a><img></a></li></ul>

Don't have it all into one unordered list. This should make your job easier, even if it's more table-like. Then mess around with CSS for the new coding.[hr=noshade] [/hr]Edit:Here's the modified CSS

.thumb_container {margin: 0 auto;width: 430px;border: 1px dashed #ffff00;}ul.thumb_list li.thumb_list {list-style: none;display: inline;}.thumbs {border: 3px solid #ffffff;border-bottom:6px solid #ffffff;height:70px;width:100px;margin:5px;}

[BooZker 0]

I did that, and yes it's inside the box, but I need to float the images left to make them align horizontally. If i keep float left, but make it in multiple ul it looks the same as before. Breaks out of the div...oh well...any more ideas haha

[truefusion 3]

Not on my side. Did you copy the CSS i just edited in? On my side, with the way i just said to do it, it does not break out of the yellow box and should look the way you want it to.

[jlhaslip 4]

<ul class="thumb_container"><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Abandonment"><img src="photography.php_files/Abandonment_by_boozker.jpg" class="thumbs" alt=""></a></li><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Serenity"><img src="photography.php_files/Serenity_by_boozker.jpg" class="thumbs" alt=""></a></li><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Blissful"><img src="photography.php_files/Blissful_by_boozker.jpg" class="thumbs" alt=""></a></li><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Cavort"><img src="photography.php_files/Cavort_by_boozker.jpg" class="thumbs" alt=""></a></li><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Hope"><img src="photography.php_files/Hope_by_boozker.jpg" class="thumbs" alt=""></a></li><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Needless"><img src="photography.php_files/Needless_by_boozker.jpg" class="thumbs" alt=""></a></li><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Wearisome"><img src="photography.php_files/Wearisome_by_boozker.jpg" class="thumbs" alt=""></a></li><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Wounded"><img src="photography.php_files/Wounded_by_boozker.jpg" class="thumbs" alt=""></a></li><li class="thumb_list"><a href="http://forums.xisto.com/no_longer_exists/; rel="lytebox[photography]" title="Escape"><img src="photography.php_files/Escape_by_boozker.jpg" class="thumbs" alt=""></a></li></ul>

A UL is a block-level entity, so remove the div from around it, since it isn't required. Change the class of the UL to do what the outer div was doing and It should be good.See above codebox, particularly the UL tag with the class change. I am thinking that the UL is not included inside the 'content' because the UL is 'floated', so the wrapper div ignores it. That is one problem with floats. They are removed from the normal document flow and then positioned afterwards, so they sometimes fall out of their container.*edit*And modify the CSS for the UL class once the changes are made.

[BooZker 0]

Oh sorry I didnt even see the CSS part you wrote down for some reason. It was like it wasnt there. Anyways yah it works!!! Thanks so much. What does inline do?

[truefusion 3]

A UL is a block-level entity, so remove the div from around it, since it isn't required. Change the class of the UL to do what the outer div was doing and It should be good.

Removing the division won't work, 'cause the problem is being caused by the floating to the left.. Removing the division will just remove the yellowbox, but the images will still break through.[hr=noshade] [/hr]
@Boozker: Inline just puts everything on one line; to put it shortly. It makes block-level elements not stretch from side to side. TABLEs, DIVs, ULs and similar are block-level elements. A, SPAN and others are inline-level elements.

[jlhaslip 4]

check out the page structure at the Hoverbox Demo

http://host.sonspring.com/hoverbox/

Your site doesn't need the on-hover because you are doing the lightbox javascript method, but review the html and css for the Image UL to see how it works. One UL is all that is required here. Add some margin or padding to adjust them for spacing.