image/text alignment

• 

  i2kdave · Member · Jul 21, 2009 at 8:11 pm

  • Copy link
  • Add topic to favorites

  i2kdave.wordpress.com

  I want the text and images on my blog to be formatted like this:

  ………….. ┌———┐
  ………….. | |
  ………….. | image |
  ………….. | |
  | |
  └———┘

  ………….. ┌———┐
  ………….. | |
  ………….. | image |
  ………….. | |
  | |
  └———┘

  ………….. ┌———┐
  ………….. | |
  ………….. | image |
  ………….. | |
  | |
  └———┘

  I can’t get this to work for the life of me. I’ve tried aligning the images to the right along with div clear. Is there a way to do this?

  The blog I need help with is: (visible only to logged in users)

• 

  i2kdave · Member · Jul 21, 2009 at 8:12 pm

  • Copy link

  wow, I can’t even get it to look right in the forum LOL

• 

  i2kdave · Member · Jul 21, 2009 at 8:19 pm

  • Copy link

  this is what it’s supposed to look like:
  http://www.filedropper.com/layout

• 

  devblog · Member · Jul 21, 2009 at 8:22 pm

  • Copy link

  div clear? How are you writing that div?

  Give this a try:

  <img src="[img file]" ... style="float: [position you want (values are left or right)]; margin: 5px 10px;" />

  HTH

• 

  i2kdave · Member · Jul 22, 2009 at 12:11 pm

  • Copy link

  I was writing <div style=”clear:both;”></div> between each set of text/picture. What you recommended works fine for one picture, but when I try to do two, it looks like this: http://www.filedropper.com/blogscreen

• 

  devblog · Member · Jul 22, 2009 at 5:03 pm

  • Copy link

  I was writing <div style=”clear:both;”></div> between each set of text/picture.

  Ok, I thought that you probably typed it in a way that wasn’t correct.

  Add the “clear: both;” declaration to the style property; that should fix it. I must tell you though that you might want to consider resizing your images to a smaller size… other wise they just won’t look good because there won’t be any space between them and the paragraphs will just flow continuously.

  To avoid that, I’d suggest you the following:

  a) make thumbnails and link them to the real picture.

  b) if you want to keep them like you have them now, then you could write something like this (to group a paragraph with its picture)

  <div style="clear: both; margin: 5px auto 15px; overflow: hidden;">
  <img src="path/to/image" style="float: left; margin: 5px 10px;" [other attributes] />
  <p>text text text</p>
  </div>

  Notice that in my above example I didn’t include “clear: both;” in the style property of the image tag. Why? because you now have a container holding each paragraph(s) with its respective image.

  Now, let’s say that a paragraph has more than one picture, then you’ll need to add the “clear: both;” to both images. If there’s such a case, I’d recommend you considering item “a)” instead.

• 

  i2kdave · Member · Jul 24, 2009 at 12:17 pm

  • Copy link

  For some reason, that wouldn’t work for me, but I was able to replace style=”float: right” with class=”alignright” and it worked great!

  <div style="clear:both;overflow:hidden;margin:5px auto 15px;">
  <img class="alignright src="path/to/image" />
  <p>text text text</p>
  </div>

  Thanks for the tip!!