floating an image, text to the side, caption beneath

  • techpoet

    (@willibrown)


    17 years, 11 months ago

    What is the best way to float an image left, have text in a paragraph to the side (not wrap) and add a styled caption? Oh, and the image is anchored (linked).

    I had great luck styling my image tags with the class below until I wanted to do a styled caption.
    .leaplimg {text-align: justify; float:left; margin-right: 1em; padding: 5px 0;}
    I tried various tricks and finally settled on putting the above class on a div wrapped around the image and text.

    But it screws up the code below somehow… WP does weird things in its editors! I’m using the basic (not visual) default (tinymce I guess). Should I just put divs and p tags in every post and force things? Is there a page that really tells you what to do to get WP to predictably treat text?

Viewing 1 replies (of 1 total)
  • Steve

    (@stevejohnson)

    17 years, 11 months ago

    To have 2 columns (which is, in reality, what you want) each has to be in its own separate container.

    You can float just the image and caption, but then the text on the right would wrap. You’ll have to contain the image and the text separately and then float the image. After that, you can float the text left with enough left margin to make it appear that its to the right, or you can float it right.

    Keep in mind though, that unless you use a third ‘clearing’ container (such as for your post data–author, time, etc.), your layout will likely break because of the floats.

Viewing 1 replies (of 1 total)
  • The topic ‘floating an image, text to the side, caption beneath’ is closed to new replies.