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  3517 
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 inside the
view port when using the original size display mode, the image appears
to be loaded in memory, and the application appears to be interacting.
When I use scaled or to-fit display mode everything shows inside the
view port. Do you know...
|
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, System.Windows.Forms.PaintEventArgs
e)
{
Graphics g=e.Graphics;
|
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 OR have the text appear on top of the image. But in the
second case, the image and text aren't centered properly.
Any help is appreciated...
Jerry
|
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 find a way
to do this in .NET. I have tried the DrawImageUnscaled and thought
that was the way to go, but I was wrong. If anyone has any
suggestions, please help! The code I have currently follows:
Public Sub mTreeViewLoad(ByVal m_xmld As...
|
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 text.
The user may "convert image to text" and copy and paste the text
displayed into any word document, or send the text displayed to the
recipient's email address or can download the text file as a zipped
text file that will be presented 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 +/-1, which
is unacceptable.
Any pointers to how to get over this?
|
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...
XXXXX ---------------
|
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 picture but at last line of my code I recieve this error.my image is 20MB jpg with 12000*14000
Image MapImage = null;
MapImage1 = Image.FromFile("filename.jpg");
Rectangle recDes1 = new Rectangle(0, 0, 1000, 1000); ...
|
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 inside an image, hide your complete image as text ,search for a particular image inside a directory, minimize the size of the image. However this is not a new concept, there is a concept called Steganography which enables to conceal your secret...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
