CSS Help: Text alongside images

[Grantovich]

I'm trying to make a very simple page that has a list of members in our organization with pictures and descriptions. I'd like the pictures to appear down the left side of the page with the text to the right of them, just as if I were using a two-column table with many rows, but with CSS properties (which I'm not as familiar with). So far this is what I've got:

Code: Select all

<img style="width: 256px; height: 192px; position: absolute;" src="images/photo.jpg"/>
<div style="margin-left: 260px;">
<h3>Joe Schmoe</h3>
<p>A paragraph of descriptive text goes here.</p>
</div>

...repeated a number of times down the page. It achieves the visual effect I want, with only one problem: If the descriptive paragraph is ever vertically shorter than 192px, its picture and the picture after it will overlap. How can I prevent this from happening?

P.S. Using CMSMS 1.0.2 with a recolored (but otherwise unchanged) "Left sidebar + 1 column" template and stylesheet

[Dr.CSS]

If you put the img. inside the div then you can call it out in the CSS...



Joe Schmoe
A paragraph of descriptive text goes here.


.members {margin-left: 260px}
.members img {float:left; margin:5px}

You may also put these in the 'content edit box' in the page by adding an image and have it aligned left, when you add an image it will show you where the text will go around it, so you would start with the img. then add text next to it then hit enter to get another paragraph and do it again for each member.


{content}


if this is the main content box you can skip the members class and just use the id or class for that box...

[Grantovich]

If you put the img. inside the div then you can call it out in the CSS...



Joe Schmoe
A paragraph of descriptive text goes here.


.members {margin-left: 260px}
.members img {float:left; margin:5px}

I tried your code exactly as it appears, with the last two lines placed in the style sheet. It looks the same as before, only now the picture is placed on top of (overlapping) the descriptive paragraph, with just a large blank space where it used to be. And the problem with subsequent images overlapping each other is still not solved.

I'm not sure I understand the other half of your post. It sounds like you're referring to some kind of page editor that I don't have. Can you view the code that is generated by your editor?

[Grantovich]

I just figured it out, and I'll post the solution in case anyone else has the same problem. The issue is that if you put a float inside a div, the div will ignore the floated element when resizing to accomodate its content. This site explains it all:

http://www.ejeliot.com/blog/59

I couldn't use the clear: both solution, because then the div tries to clear the floated sidebar outside the content area, resulting in a large blank space. I found that the overflow: hidden solution seemed to work fine, though I have yet to understand why it works. The site recommends width: 100% as a way to force hasLayout in IE, but I found that for some reason this shoved the content down to the bottom of the sidebar like clear: both had done, so I used height instead and it looks okay (how does it work when you specify height as a percentage, anyway?).

The final code:

Code: Select all

<div style="overflow: hidden; height: 100%;">
<img style="width: 256px; height: 192px; float: left; margin-right: 1em; margin-bottom: 0.5em;" src="images/photo.jpg"/>
<h3>Joe Schmoe</h3>
<p>A paragraph of descriptive text goes here.</p>
</div>