need help floating image to the left of dt, dd tags

Discussion in 'Web Design and Development (archive)' started by LoopHoles, Nov 20, 2003.

  1. macrumors member

    Joined:
    Jul 19, 2003
    #1
    I have the following code for a item description list (<dt>):

    Code:
    <dl>
    
        <dt class="thumbnail"><img src="itemimg.jpg" /></dt>
        <dt>Item Name/Title</dt>
        <dd>Item description, definition, plus other info.</dd>
    
        <dt class="thumbnail"><img src="item2img.jpg" /></dt>
        <dt>Item2 Name/Title</dt>
        <dd>Item2 description, definition, plus other info.</dd>
    
    </dl>
    
    I'd like the image to be left with the item name and description flowing to the right of it. I don't mind changing tags if that's what it takes.

    Two other requirements: 1. that the code stay standards compliant, meaning only <dt> and <dd> are allowed immediately inside the <dl> tag, 2. that the positioning be done with css.

    anyone have a clue? let me know if you need more details to think out a solution.

    TIA
     
  2. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #2
    Sorry I missed this earlier.

    Here's the CSS:
    Code:
    dl {
     width: 400px;
    }
    dt.thumbnail {
     float:right;
     width: [i]imagewidth[/i].px
    }
    You'll need to specify a width for the floated element.
     
  3. thread starter macrumors member

    Joined:
    Jul 19, 2003
    #3
    Thanks. I tried your method after seeing the post, but it didn't work for me. It may have something to do with the other boxes around the list or other styles applied.

    Anyway, since I was in a hurry, I just used an unordered list <ul> and placed the image inside <li> floated left of <h5>, and paragraph tags instead of a description list. so now it's more like:
    Code:
    <ul>
    	<li><img src="img.jpg" alt="image" />
    	<h5>item title</h5>
    	<p>description</p>
    	</li>
    </ul>
    
     
  4. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #4
    Glad you found something that works.

    In the future, it would be great if you could post the full page code, or just link to the page. That way we can see what's going on in context. :)
     

Share This Page