Connecting Tech Pros Worldwide Help | Site Map

css float left and linebreak

Member
 
Join Date: Jul 2007
Posts: 40
#1: Nov 8 '08
Hey,
Is it possible to change line on a float object?
For example let say I have one <b> tag, one <p> tag and one <img> tag:
I want the <img> to have float right and the <b> to have float left then I want the <p> to have float none so it will go around the image.
However if I have float left on the <b> tag the <p> will stay on the same line as <b> and the only way I know how to move it down is by giving the <b> tag a width on 100%

see attached image for an example of how I want it to align

Expert
 
Join Date: Aug 2008
Posts: 397
#2: Nov 9 '08

re: css float left and linebreak


Anything is possible: providing it is based on fact, rather than incomprehensible gibberish. Put a test example on a public server and point to it in your post to the forum.
Expert
 
Join Date: Aug 2008
Posts: 397
#3: Nov 9 '08

re: css float left and linebreak


But wait, maybe it can be done. The question is, do I understand the question?

It may be a little inconsistent cross-browser but is this anywhere near what you're after?
Member
 
Join Date: Jul 2007
Posts: 40
#4: Nov 9 '08

re: css float left and linebreak


yes thats correct, I was was looking for something like clear: left.
thanks for helping!

PS:
I thought my image was quite informative :)
Expert
 
Join Date: Aug 2008
Posts: 397
#5: Nov 9 '08

re: css float left and linebreak


Quote:
I thought my image was quite informative :)
It was informative. David the moron on this end didn't see it the first time around.

BTW, I am not sure, at the moment, what is causing the rendering difference among compliant browsers (difference in the space above the image). I am looking into it-- and if correctable, I'll post a revision
Expert
 
Join Date: Aug 2008
Posts: 397
#6: Nov 9 '08

re: css float left and linebreak


Quote:

Originally Posted by David Laakso

BTW, I am not sure, at the moment, what is causing the rendering difference among compliant browsers (difference in the space above the image). I am looking into it-- and if correctable, I'll post a revision



Please see revision on server:
Expand|Select|Wrap|Line Numbers
  1. body {
  2. font : 100%/normal /*helvetica, deleted*/arial, sans-serif;
  3. }
  4. img {
  5. margin : /*-141px*/ -155px 1px 10px 20px;
  6. }
  7. .c {
  8. line-height: 1/*added*/;
  9. }
  10.  
Additionally the cc's for IE/6 and IE/7 were revised.

The above changes on Mac 10.4 make Opera, Safari, Camino, and WebKit the same.
Firefox has been let to ride the image a little tighter to the top than
the other browsers...
Reply


Similar HTML / CSS bytes