Simple CSS question

Discussion in 'HTML' started by Mike Silva, Mar 25, 2009.

  1. Mike Silva

    Mike Silva Guest

    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>
     
    Mike Silva, Mar 25, 2009
    #1
    1. Advertising

  2. Mike Silva

    dorayme Guest

    In article
    <>,
    Mike Silva <> wrote:

    > 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>

    --
    dorayme
     
    dorayme, Mar 25, 2009
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    734
    clintonG
    Dec 24, 2004
  2. Replies:
    6
    Views:
    553
    Jonathan N. Little
    Mar 18, 2006
  3. AF
    Replies:
    17
    Views:
    602
    Nije Nego
    Aug 9, 2006
  4. Replies:
    29
    Views:
    884
    Ben C
    Mar 21, 2008
  5. richard
    Replies:
    12
    Views:
    756
    dorayme
    Mar 9, 2010
Loading...

Share This Page