WordPress.org

1. Jermster
   Member
   Posted 7 years ago #

   I am testing a word wrap around a series of graphics. When the words are wrapping around an image on the left, things work. When the images are on the right, the words don't wrap.
   The only difference in CSS is that the images on the right are absolutely positioned so that they appear at the bottom of the page.
   How do I get the text to respect the images on the right?
   XHTML: http://jeremiahlee.com/blog/index0.php
   CSS: http://jeremiahlee.com/blog/themes/curiously/wp-layout.css

2. Jermster
   Member
   Posted 7 years ago #

   According to http://www.w3.org/TR/REC-CSS2/visuren.html :
   "Absolutely positioned boxes are taken out of the normal flow."
   So how does one anchor an image to the bottom right corner and have text wrap? It works in the top left corner. Is this just a flaw of CSS?
   Your help is appreciated! I'll even send you a gmail invite in exchange for you help. :-)

3. Root
   Member
   Posted 7 years ago #

   I should say at the outset that this is a fine looking blog, and one which is using CSS to somewhere near the max. I should also say that I am not going to provide a complete coded solution. But two things spring to mind. A float left is obviously the complete opposite of a float right in every respect, and as I understand text flow, it works best when flowing round a floated element. At the bottom however you are using position absolute for obvious reasons. You are therefore trying to solve one problem with a solution from another. This requires IMHO a reworking of the div structure and some lateral thinking about where that bottom image needs to be, structurally. I would try dropping it down one level in the stack to a lower div, or creating another div just to hold the rh images. It could go as a background. First and foremost I would keep in mind that the most powerful tool in CSS is the ability to use an absolutely positioned div inside a relatively positioned one.
   The full truth is I do not really know but I hope this helps a bit. ;)

Topic Closed

This topic has been closed to new replies.