My content div is set to expand vertically as needed based on the content. I did this by using a 1 px tall, repeating gif as the background image. (Above the content DIV is a “navigation†DIV with a non-repeating background gif, and below it is a “footer†DIV with a non-repeating background gif.) The content div expands perfectly when things are wrapped in <p> elements, but if I don’t wrap something in <p>, like some images I just added and floated to the left, things go weird: 1. In Firefox, the images go outside the content DIV and push the footer text to the right: http://img228.imageshack.us/img228/6246/1firefoxpb1.jpg 2. In IE7, the images expand the content DIV, but the 1 px gif doesn’t repeat (leaving a big black space): http://img218.imageshack.us/img218/8144/2ie7wa5.jpg If I put the images in <p> elements, things work fine, but I suspect if I don't fix this now Il'l run into more problems later on. Any ideas? Thank you. The HTML: <div id="content"> <img src="images/home/man1.jpg" alt="man crying" width="87" height="82" class="floatleft"/> <img src="images/home/man2.jpg" alt="man crying" width="87" height="77" class="floatleft"/> <img src="images/home/man3.jpg" alt="man crying" width="87" height="97" class="floatleft"/> <p>This is content</p> <p>This is content</p> <p>This is content</p> </div> Code (markup): The CSS: #content { background-image: url(images/global/images/tablemiddle.gif); background-repeat: repeat; padding: 1px 78px 1px 70px; /* the 1px top & bottom get rid of large gap between nav & content div, and footer & content div */ margin: 0; } #content p { padding: 0; margin: 10px 0; } .floatleft { float: left; margin: 0 10px 10px 0px; clear: left; } Code (markup):
1) they're floats - containers are not supposed to wrap floats unless you tell them to by making the container float, setting an overflow property OTHER than visible, or by having an element that clears AFTER the float (not inside it) 2) you do know that by clearing inside them the text is NOT going to wrap next to them, right? You need an extra container for that behavior. 3) Why would padding 1px fix a 'large gap' - it sounds to me like you've got WAY bigger issues in your code. You have an entire 'sample' page and a image of what you want it to look like? Methinks you are either overthinking/misthinking your containers, or there are other issues in your layout.
I wanted to give you some rep but I can't until I give it to someone else. Just wanted to say thanks for explaining this, I've always had this problem with some containers.
Here's a general idea of how I want the content to appear: http://img222.imageshack.us/img222/7605/contentareadt9.jpg I tried to model my code after the tutorial at http://css.maxdesign.com.au/floatutorial/tutorial0305.htm, which suggested a) floating the image to allow text to wrap and b) clearing the images to get them to vertically stack on top of each other. He also demonstrate this by putting the floated/cleared images and text in a regular container div not set to float. e.g.: .containingbox { border: 1px solid #666; color: #333; background-color: #fff; padding: 10px; } Code (markup): I was having extra space/gaps between divs, and then read that the "collapsing margin" problem can cause this (when margins of 2 DIVs bump up against each other). The fix is to add a 1 px top and bottom padding. It fixed the gaps, but I still tend to agree with you that something more nefarious is going on. Link to screenshot at top. Nothing fancy - I just need a simple content div that can expand vertically based on the content. Perhaps my technique of using a 1px tall repeating background gif (which works well in a table layout) may not be the best approach? Thank you for any further suggestions. I'm very new to this. Kurt
Ok, that tutorial is full of it because with the code clearing the item before it, the para's should only wrap the last image, not all three of them. As to the image of what you are trying to do, I'd code it thus: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test</title> <style type="text/css"> * { margin:0; padding:0; } .container { overflow:hidden; /* make pay attention to floats */ border:1px solid #666; background-color:#fff; padding: 10px; height:1%; /* haslayout */ } .image_box { width:100%; float:left; /* these remove the 'worry' of clearing floats */ padding:4px 0; } .image_box img { border:0; float:left; background:#00F; /* just so I can see 'em */ } .image_box p { color:#333; margin:0 0 0.5em 96px; } </style> </head><body> <div class="container"> <div class="image_box"> <img src="image1.png" alt="good" width="87" height="82" /> <p>Some test content<p> <p>Some test content<p> <p>Some test content<p> <p>Some test content<p> <p>Some test content<p> </div> <div class="image_box"> <img src="image2.png" alt="bad" width="87" height="82" /> <p> Some more test content, let's make this a little longer. Some more test content, let's make this a little longer. Some more test content, let's make this a little longer. </p> </div> <div class="image_box"> <img src="image3.png" alt="ugly" width="87" height="82" /> <p>Even more test content. Keep it coming ;)</p> </div> </div> </body></html> Code (markup): To explain - the extra wrapper REALLY simplifies life as we can use that to 'wrap' the float, meaning we dont' have to worry about CLEARING any floats. Setting overflow:hidden on the outermost container makes it wrap our inner floats, and a simple haslayout fix for IE6 brings it into line. I added some content to show that the margin-left setting will not wrap under the image. If you want it to wrap under the image if the section is too long, remove that large right margin and add margins to the image itself. However, if you want the three images back to back not lining up with the text (like that tutorial says) you need to wrap them all in a container like a div, and float JUST the container. If you want to constrain the total width, that's easy enough to do - just set the width on .container.
You are a hero among men. Here's the final: http://img218.imageshack.us/img218/5046/finalcompga2.jpg It renders perfect in Firefox and acceptable in IE7. In the container CC, I commented out the border & background color, and adjusted the margins to reduce some large spacing. As in: .container { overflow:hidden; /* make pay attention to floats */ [COLOR="Gray"]/*border:1px solid #666; background-color:#000000;*/ [/COLOR]padding: [COLOR="Red"]1px 10px 0 10px[/COLOR]; height:1%; /* haslayout */ } Code (markup): Can you explain further what the height:1% is for? Is that just to deal with an IE6 bug? It sure does. It seems that I could include the container div as part of my global template (and make the region inside it editable), because it should help me manage content in the other pages as well. Correct? Do you mean "that large left margin" (the 96px in the .image_box p). It looks like the width is already contained, as evidence by the long paragraph in the middle box properly returning to a new line when it got to the right edge. Or are you referring to something else? (My plan is to have the width of the whole site fixed, but the height flexible.) Thank you again for your fix. I feel like I can finally move forward. Kurt
About that width issue, perhaps this is what you were getting at: http://img218.imageshack.us/img218/4889/widthrg5.jpg Weird. When I added the real text, in DW (in design view) it runs well past the right edge of the DIV. But it renders fine when viewed in a browser. Does that make sense?
IMHO Dreamweaver is a bloated pile of crap that you cannot trust to not mangle code every five seconds, and frankly you can't trust it's preview box either 99% of the time. Which is why you throw it in the trash, grab a normal text editor and copies of all the latest browsers. That means IE 5.5 and 6 standalone, IE7 native, Opera, FF and Safari 3 beta for windows. EVEN BETTER if you can test on a real safari install and FF/Op/Konqueror under linux 'just to be sure'.