SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  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 10:38.
    New Plastic Arts: Visual Communication | DesignateOnline

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

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding float:left; to a img seems to work:
    Code:
    <html>
    <head>
    <style>
    .diaryblock {
    background: #FAFAFA;
    text-align: left;
    padding: 10px 20px;
    }
    a img {
    border: 0;
    vertical-align: top;
    padding-right: 10px;
    float:left;
    }
    </style>
    	<title>Untitled</title>
    </head>
    
    <body>
    <div class="diaryblock">
    <a href="..."><img src="foo.gif" alt="" width="220" height="171" border="0"></a>04.01.03  <a href="...">'Old Kent Road'</a>.<br /> New painting added to Works II.
    </div>
    
    </body>
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think if you float the image as the above post states the text will wrap around the image as you require.

    I think that was how it was meant to work.

    Paul

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

    I had tried using float: left before, but it broke the layout and vertical spacing of the divs.
    It had caused the divs in which the image were contained to 'lose' their height and shrink smaller than the content within them (vertically).
    I hadn't actually set the height, but was relying on padding (in the div) and the physical height of the image itself (pixel) to 'push out' the height of the div and give them an even appearance.
    I hard-coded the heights of the divs and everything seems to have fallen back into place again.

    I was hoping that the div heights could be set 'dynamically' based on padding plus the height dimension of the div's content, but it seems using float breaks that idea over its knee.

    Oh, well.
    I guess I can live with hard-coding the height of the divs.

    Thanks again.
    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
  •