CSS Image Stacking Issue

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Image Stacking Issue

pab1953

12:18 am on Oct 20, 2008 (gmt 0)

I have a three-column CSS layout. In the center column
I have three images, floated left, with text to the right of each. At least, that's what I want. The top and the bottom ones are behaving themselves, but the middle one is a problem. The image there rides up into the text of the one above. Any ideas why and how I get it to stay where it's supposed to be? Thanks.

Here's the HTML:

<div id="[...]">[...]</div>
<h3>[...]</h3>
<div id="[...]"><img src="[...]" width="100" height="100" class="floatLeft" />Bunch of text.</div>
<div id="[...]"><img src="[...]" width="100" height="100" class="floatLeft" />Bunch of text.</div>
<div id="[...]"><img src="[...]" width="100" height="100" class="floatLeft" />Bunch of text.</div>

And here's the CSS for "floatLeft":

img.floatLeft {float: left; margin-right: 7px; margin-bottom: 4px;}

alt131

1:04 am on Oct 20, 2008 (gmt 0)

Hi pab1953,

Floats can be tricky to figure especially without a doctype and css for elements that may be affecting how they are drawn. On the code provided I cannot reproduce the issue because without a width on the container divs the images and text just float left across the page - without any overlapping.

Looking at your code, one quick fix should be to apply

clear:left

to the div surrounding the image and the text. This should make sure each div "drops" down below (clears) the preceding one before beginning to be drawn.

pab1953

9:13 am on Oct 20, 2008 (gmt 0)

Thanks for your reply, alt131.

"clear:left," added to the div in my code above, which controls the text, did get the three graphics and their text to line up properly -- but ... But it also pushed the entire center column down below the two outside (left and right) columns. So: one problem solved, new one spawned. :)

FYI The layout is based upon a Dreamweaver (CS3) three column liquid template ("thrColLiqHdr"). Here's the doctype DW generated: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

alt131

1:17 pm on Oct 20, 2008 (gmt 0)

Preference is to spawn solutions ;)
Unfortunately I haven't touched Dreamweaver for several versions so the template is not familiar, but the outcome makes some suggestions about the code. Here are some "back to basics" thoughts:

The "image divs" all have an id. As only one id per page, that indicates each of the image divs also has style rules that are different from the others. Is there are rule affecting the dimensions and positioning (such as margins/padding, etc) of the image divs?
(If those individual ids are not required, change them to a class so it can be used more than once)
Floats are drawn as high as possible so if "riding up into the text" you mean the middle image is being drawn with the top left corner to the right of the first image, but immediately below the text of the first image, then that is as designed.
Clear should fix that, but a cleared float should "drop" below the bottom of any previously floated element earlier in the source. You've said the image divs are now clearing the left column. If the left column is floated, that suggests it is the "earlier element", which means the "image divs" aren't contained within a page <div>ision - such as one to create the "central column". Or maybe not ;) - perhaps validate to double check all elements have been closed.
One fix could be to wrap the image divs in a "wrapper" div. To avoid an extra div solely to create a wrapper, try a height on the image divs.
As an aside, floats should also have a width - Is there a width set on the central column, or the "image divs" themselves, that controls horizontal expansion? (Which may/may not have contributed to them dropping below the right column).

pab1953

3:29 pm on Oct 20, 2008 (gmt 0)

Thanks for taking the time to provide such a thorough reply. I'll explore some of your suggestions over the next few days.