By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

CSS Float, large image and short text

P: 4
Is there a method of using the CSS float command on images to contain itself within a single paragraph?

The problem I'm running into is trying to use float images on a listing page, I have an image (say 100 pixels high) that is set to float left, the text that I'm floating around it is only 2 lines high (leaving room for additional text below). Because there is room for additional text floating right of the image my next paragraph text begins also floating next to the image rather than a paragraph break below the image. Is there a way to force a float to only apply within the paragraph that contains it?

If the second paragraph also contained a image set to float I could do this by using the clear: left function, however if it the next paragraph is just text it seems to invariably bunch up below the previous text instead of below the image in the previous paragraph.

Any ideas?

Cheers,

DS
Mar 20 '07 #1
Share this Question
Share on Google+
8 Replies


drhowarddrfine
Expert 5K+
P: 7,435
You can get the first <p> to expand to contain the floated element by adding overflow:auto; to the <p>

<p style="overflow:auto">
Mar 20 '07 #2

snowdonkey
P: 37
DarkSaturn, welcome to The Scripts! It's always best to provide code that's not working properly (so that someone responding doesn't have to re-create an example from scratch).

In addition to what drhowarddrfine suggested, you might also try removing the image you're floating left from within the paragraph. Using inline CSS it would look something like this:

Expand|Select|Wrap|Line Numbers
  1. <div>
  2. <img src="myPic.jpg" style="float:left;" />
  3. <p>Paragraph 1</p>
  4. <p style="clear:left;">Paragraph 2</p>
  5. </div>
  6.  
Mar 20 '07 #3

P: 4
Thanks for the assistance everybody, here is the code:

Expand|Select|Wrap|Line Numbers
  1. <div class="homebucket">
  2. <p>Text link</p>
  3. <p>Text link</p>
  4. <p style="overflow: auto"><a href="link.html" target="_self" name="Link"><img style="float: left; margin-right: 10px" height="100" alt="image" src="image.gif" width="100" border="0" /></a>Line 1<br />Line 2<br />Line 3</a></p>
  5. <p style="clear: left"><a href="link2.html" target="_self" name="Link 2">Link 2</a><br />Link 2 Date Info</p></div>
  6.  
I've noticed without the overflow: auto the 'Link 2' ends up bunched right up below the image in firefox (but loads fine in IE).
Mar 21 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
You have a lot of errors in the code. Validate both your html and css to fix those first. Are you using xhtml? Make sure you are using that doctype.

In any case, make sure it is working in Firefox before worrying about IEs bugs.
Mar 21 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
I'll revisit this shortly but I thought FF was doing what you wanted. I rewrote your code so it is valid html. Perhaps this is correct for what you want to see but, in any case, you can see your errors. The "target" has been deprecated and there are other ways to do that.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.   <head>
  5.     <title></title>
  6.     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  7.     <style type="text/css">
  8.  
  9.     </style>
  10.   </head>
  11. <body>
  12.  
  13. <div class="homebucket">
  14. <p>Text link</p>
  15. <p>Text link</p>
  16. <p style="overflow: auto">
  17.     <a href="link.html" name="Link">
  18.     <img src="yourimg.gif" style="float: left; margin-right: 10px; height:100px; width:100px" alt="" >
  19.     </a>
  20.  
  21.     <a href="#">
  22.         Line 1<br />
  23.         Line 2<br />
  24.         Line 3
  25.     </a>
  26. </p>
  27.  
  28. <p style="clear: left">
  29.     <a href="link2.html" name="Link 2">
  30.         Link 2
  31.     </a><br />
  32.         Link 2 Date Info
  33. </p>
  34. </div>
  35.  
  36. </body>
  37. </html>
Mar 21 '07 #6

P: 4
I'm only resulting two errors when I validate as XHTML, the floater </a> that I didn't remove, and the broken ' name="Link 2" ' instead of ' name="Link2" '.

It's XHTML transitional, I have a lot of problems because this is within a CMS, with templates in HTML, and an editor that is XHTML for the most part (but does things like uses sentence long name identifiers for tracking).
Mar 21 '07 #7

drhowarddrfine
Expert 5K+
P: 7,435
Ok. I made the slight changes for xhtml but for strict. You have no need for transitional unless the code you are modifying uses deprecated code. In that case, this will still work with a change in the doctype.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4.   <head>
  5.     <title></title>
  6.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  7.     <style type="text/css">
  8.  
  9.     </style>
  10.   </head>
  11. <body>
  12.  
  13. <div class="homebucket">
  14. <p>Text link</p>
  15. <p>Text link</p>
  16. <p style="overflow: auto">
  17.     <a href="link.html" name="Link">
  18.     <img src="bmt.png" style="float: left; margin-right: 10px; height:100px; width:100px" alt="" />
  19.     </a>
  20.  
  21.     <a href="#">
  22.         Line 1<br />
  23.         Line 2<br />
  24.         Line 3
  25.     </a>
  26. </p>
  27.  
  28. <p style="clear: left">
  29.     <a href="link2.html" name="Link2">
  30.         Link 2
  31.     </a><br />
  32.         Link 2 Date Info
  33. </p>
  34. </div>
  35.  
  36. </body>
  37. </html>
  38.  
Mar 21 '07 #8

P: 4
For sake of comparison I dropped the code provided into the editor and cycled it, here is the result:

Expand|Select|Wrap|Line Numbers
  1. <div class="homebucket">
  2. <p>Text link</p>
  3. <p>Text link</p>
  4. <p style="overflow: auto"><a href="link.html" name="Link"><img style="float: left; width: 100px; margin-right: 10px; height: 100px" alt="" src="yourimg.gif" /> </a><a href="#">Line 1<br />Line 2<br />Line 3 </a></p>
  5. <p style="clear: left"><a href="link2.html" name="Link 2">Link 2 </a><br />Link 2 Date Info </p></div>
  6.  
The preceding code was chopped off for obvious reasons (it exists within the template, no necessary within this section I'm editing). It completely butchers any sort of indentation, and does a strange thing with line breaking opening tags but bunching up closing tags, its more or less the bane of my existence.

However it does look to have done something I didn't expect, allowing the height and width tags to be defined through style, which is somewhat confusing since when images are added on the visual end it insists on using HTML height= and width=.

I appreciate the guidance on this, I've been planning on migrating the templates over to proper XHTML in our next quiet period. It's pretty daunting knowing I have 300+ pages each full of bunches of individual sections all completely full of nasty half-breed code. Which may not be resolvable since their are editors other than me, who use only the visual mode, which will be creating more bad code faster than I can fix it.
Mar 21 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.