SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tableless layout & aligning text/image

    I want this...


    but when I add a linebreak <br /> I get this...


    The div is too wide for the text to wrap naturally. So without any 'linebreaks' in the code I get this...


    I'm guessing it's something to do with float and/or clear, but my understanding of both of those properties borders on non-existant.

    Codewise, the current state of play is as follows...
    Code:
    css...
    
    .diaryblock {
    background: #FAFAFA;
    text-align: left;
    padding: 10px 20px;
    }
    
    a img {
    border: 0;
    vertical-align: top;
    padding-right: 10px;
    }
    
    
    html...
    
    <div class="diaryblock">
    <a href="..."><img src="media/latestimage.gif" /></a>04.01.03  <a href="...">'Old Kent Road'</a>. New painting added to Works II.
    </div>
    ...which gives me the third example.

    Anyone willing to point out the oh-so-simple solution that is starting me in the face?

    TIA.

    p.s.
    I'd really rather avoid splitting the image and text each into a column/div of their own as I'm trying to keep the code as simple as possible.

    I'm hoping to make the whole thing dynamic (via XML and SSIs) once I've got to grips with the basic blueprint for the site. As a result I'd like to keep the code as clean and simple as possible which, as far as I'm concerned, rules out nested divs.

    For now I'm just concerned with getting the layout looking correct (and the code solid).
    Last edited by Bill Posters; Jan 25, 2003 at 09:38.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •