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
8  3494 
You can get the first <p> to expand to contain the floated element by adding overflow:auto; to the <p>
<p style="overflow:auto">
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: -
<div>
-
<img src="myPic.jpg" style="float:left;" />
-
<p>Paragraph 1</p>
-
<p style="clear:left;">Paragraph 2</p>
-
</div>
-
Thanks for the assistance everybody, here is the code: -
<div class="homebucket">
-
<p>Text link</p>
-
<p>Text link</p>
-
<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>
-
<p style="clear: left"><a href="link2.html" target="_self" name="Link 2">Link 2</a><br />Link 2 Date Info</p></div>
-
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).
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.
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. - <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-
"http://www.w3.org/TR/html4/strict.dtd">
-
<html>
-
<head>
-
<title></title>
-
<meta http-equiv="content-type" content="text/html;charset=utf-8">
-
<style type="text/css">
-
-
</style>
-
</head>
-
<body>
-
-
<div class="homebucket">
-
<p>Text link</p>
-
<p>Text link</p>
-
<p style="overflow: auto">
-
<a href="link.html" name="Link">
-
<img src="yourimg.gif" style="float: left; margin-right: 10px; height:100px; width:100px" alt="" >
-
</a>
-
-
<a href="#">
-
Line 1<br />
-
Line 2<br />
-
Line 3
-
</a>
-
</p>
-
-
<p style="clear: left">
-
<a href="link2.html" name="Link 2">
-
Link 2
-
</a><br />
-
Link 2 Date Info
-
</p>
-
</div>
-
-
</body>
-
</html>
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).
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. -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html>
-
<head>
-
<title></title>
-
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
-
<style type="text/css">
-
-
</style>
-
</head>
-
<body>
-
-
<div class="homebucket">
-
<p>Text link</p>
-
<p>Text link</p>
-
<p style="overflow: auto">
-
<a href="link.html" name="Link">
-
<img src="bmt.png" style="float: left; margin-right: 10px; height:100px; width:100px" alt="" />
-
</a>
-
-
<a href="#">
-
Line 1<br />
-
Line 2<br />
-
Line 3
-
</a>
-
</p>
-
-
<p style="clear: left">
-
<a href="link2.html" name="Link2">
-
Link 2
-
</a><br />
-
Link 2 Date Info
-
</p>
-
</div>
-
-
</body>
-
</html>
-
For sake of comparison I dropped the code provided into the editor and cycled it, here is the result: -
<div class="homebucket">
-
<p>Text link</p>
-
<p>Text link</p>
-
<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>
-
<p style="clear: left"><a href="link2.html" name="Link 2">Link 2 </a><br />Link 2 Date Info </p></div>
-
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: CDB |
last post by:
Hello I was running the Image Browser example (from the JAI book
by Lawrence Rodrigues) with a very large image, specifically one of the
size 12,000 x 6,000 pixels, and the image does not render...
|
by: delong |
last post by:
Hi
I am trying to display a large image on the form and make the form
scrollable.
My image is about 4200 x 7000 pixel.
private void Form1_Paint(object sender,...
|
by: Jerry Camel |
last post by:
I want to center an image on the screen and have text centered over the
image. What's the best way to do this?
I've been playing with style tags and I can get the stuff to center
automatically...
|
by: SeanT |
last post by:
Greetings and salutations! I am having a real issue with the VB.NET
TreeView control. I need to display an image (a.k.a. logo, picture,
etc) from a file as the treenode object. I can not seem to...
|
by: Socrates |
last post by:
I am interested in developing an online utility that will enable users
to
copy and past any image (or upload any image on the internet) to the
online utility, which will then convert the image to...
|
by: Partho |
last post by:
I have a float variable which I need to add to a short variable. How do
I do this? Do I have to typecast or is there a way around? I tried
typecasting the float to a short, but that gives me a 0 or...
|
by: shapper |
last post by:
Hello,
What is the best way to place an image and a text side by side using
CSS?
Basicaly what I am trying to do is to make the image and the text to
appear as follows:
Image My Text......
|
by: tictac |
last post by:
Hi
I want to show a large image in C#,but I recieve Out of memory error.
how can I read the smaller block of my picture and show it.I work with GDI+.
here is my code .I try to load one part of my...
|
by: Debadatta Mishra |
last post by:
Introduction
In this article I will provide you an approach to manipulate an image file. This article gives you an insight into some tricks in java so that you can conceal sensitive information...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| | |
