Simple CSS question

[Mike Silva]

I have what I assume is a simple CSS question, to something that is
done all the time. I'm trying to lay out a column of vertical object
blocks each consisting of a graphic in the upper left of the block, a
title to the right of the graphic, and some text below the title. If
the text flows below the bottom of the graphic, I want the next object
block to begin below the text, otherwise to begin below the graphic.
Also, if the text flows below the bottom of the graphic, I don't care
if it remains to the right of the graphic or flows underneath the
graphic.

I know this should be easy, but I'm not seeing how to do it. Below is
a framework I've made, as a starting point. In the .graphic, .title
and .desc classes I've tried both absolute positioning inside the
(relative) obj box, and also floating the graphic to the left, but I
can't get something that works in both circumstances (text flows below
graphic, or text stays above graphic). When I say "works" I mean that
the next object block starts in the correct location below the
previous object block and all the way to the left. So what am I
getting wrong?

The essentials of my framework:

..obj {
margin: 20px 20px;
width: 30em;
}

.. obj .graphic {
}

.. obj .title {
}

.. obj .desc {
}

.....

<div class="obj">

<div class="graphic">
<img src="myimage.jpg" width="100" height="100" alt="image" />
</div>

<div class="title">
This is a Title
</div>

<div class="desc">
This is some descriptive text. In fact, it is a whole bunch of
descriptive text. In fact, I will keep typing until something breaks,
and then I will try and figure out how to fix it. In this case, I
want the enclosing item box to grow vertically to encompass all of the
descriptive text no matter how much it may be.
</div>
</div>

<div class="obj">

<div class="graphic">
<img src="myimage.jpg" width="100" height="100" alt="image" />
</div>

<div class="title">
This is another Title
</div>

<div class="desc">
This is some descriptive text.
</div>
</div>

 

[dorayme]

I have what I assume is a simple CSS question, to something that is
done all the time. I'm trying to lay out a column of vertical object
blocks each consisting of a graphic in the upper left of the block, a
title to the right of the graphic, and some text below the title. If
the text flows below the bottom of the graphic, I want the next object
block to begin below the text, otherwise to begin below the graphic.
Also, if the text flows below the bottom of the graphic, I don't care
if it remains to the right of the graphic or flows underneath the
graphic.

Why does this:

<div><img src="pics/crimson.png" alt=""> text... </div>

<p>Text</p>

<p>Text</p>


not do what you want?

The elements I use here are simply examples of block elements, the best
semantic element to choose depends on your purpose.

If you want the text that goes with the graphic to not flow under the
graphic, you can do this:

<http://dorayme.netweaver.com.au/silva.html>