www.webdeveloper.com
Results 1 to 5 of 5

Thread: Floating image in text problem

  1. #1
    Join Date
    Sep 2006
    Location
    Switzerland
    Posts
    30

    Floating image in text problem

    Hi everyone

    I'm stuck with a little problem. I like to have floating images in my text like here:
    http://www.meijer.li/php/biking/wildspitz.php
    But I would like to start a new title on a below the image and it's description which are floating to right side. Any idea how i can do this without using tables?

    Thanks and cheers
    /erik

  2. #2
    Join Date
    May 2007
    Location
    Cleveland, OH
    Posts
    1,403
    It's not hard, just wrap the image and anything you want associated with it in a div.
    Code:
    div.image { 
      width:20%;
      float:left;
      text-align:center;
    }
    div.image p {
      text-decoration:italic;
    }
    
    then in your html
    
    <h2>Overview</h2>
    
    <div class="image">
      <img src="/path/to/image.jpg">
      <p>Image Description</p>
    </div>
    
    <p>This text will wrap around the image and its
    description, if it's long enough.</p>

  3. #3
    Join Date
    Sep 2006
    Location
    Switzerland
    Posts
    30
    Thanks for your reply mate, but that is what I already have. So text is wrapping properly around the image if it is big enough.
    The problem is, if it is not big enough, the title of the next paragraph wraps also around the image, an I like to prevent that.
    I hope I made myself clear now...

  4. #4
    Join Date
    May 2007
    Location
    Cleveland, OH
    Posts
    1,403
    Oh, I see what you mean. You can do either of the following to prevent that:
    Code:
    <h2 style="clear:left">
    Or better
    Code:
    .clearL {
      clear:left;
    }
    
    
    <h2 class="clearL">
    
    //this way you can prevent from having to write multiple inline styles throughout your source.

  5. #5
    Join Date
    Sep 2006
    Location
    Switzerland
    Posts
    30
    yes, thats right what I was looking for.
    thanks a lot mate!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles