Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Floating an IMG within a DIV

Reply
Thread Tools

Floating an IMG within a DIV

 
 
Oli Filth
Guest
Posts: n/a
 
      12-25-2004
Hello.

I'm creating a DIV to hold a short article and an associated image, and
I want the image on the left.

See http://olifilth.co.uk/test4.htm for an example.

However, with this set-up (as you can see in the example if your browser
window is wide enough), the containing DIV only stretches down as far as
the end of the text, not the end of the image.

How would one do this properly, so that the DIV graphically contains
everything, regardless of whether the image or the text is "higher",
using proper CSS layout rather than tables?

TIA,
Oli
 
Reply With Quote
 
 
 
 
Erik Ginnerskov
Guest
Posts: n/a
 
      12-25-2004
Oli Filth wrote:

> I'm creating a DIV to hold a short article and an associated image,
> and I want the image on the left.


> However, with this set-up (as you can see in the example if your
> browser window is wide enough), the containing DIV only stretches
> down as far as the end of the text, not the end of the image.


<div>
<p style="float:left;margin-right:15px;margin-top:0"><img src....></p>
<p style="margin-top:0">Associated text here</p>
</div>

<div style="clear:both"> <!-- next block -->

The 'margin-top' attributes make sure the upper line of the image at of the
text equals in all browsers.

--
Yours
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk


 
Reply With Quote
 
 
 
 
Oli Filth
Guest
Posts: n/a
 
      12-25-2004
Erik Ginnerskov wrote:
> Oli Filth wrote:
>
>
>>I'm creating a DIV to hold a short article and an associated image,
>>and I want the image on the left.

>
>
>>However, with this set-up (as you can see in the example if your
>>browser window is wide enough), the containing DIV only stretches
>>down as far as the end of the text, not the end of the image.

>
>
> <div>
> <p style="float:left;margin-right:15px;margin-top:0"><img src....></p>
> <p style="margin-top:0">Associated text here</p>
> </div>
>
> <div style="clear:both"> <!-- next block -->
>
> The 'margin-top' attributes make sure the upper line of the image at of the
> text equals in all browsers.
>


Nope, that doesn't help (except for the clear:both). The IMG still goes
past the bottom of the DIV (see http://olifilth.co.uk/test5.htm). I want:

--------------------------------------------------------------
| ----------------- DIV |
| | | Blah blah blah blah blah blah blah blah |
| | | Blah blah blah blah blah blah blah blah |
| | IMG | Blah blah blah blah blah blah blah blah |
| | | Blah blah blah blah blah blah blah blah. |
| | | |
| | | |
| ----------------- |
--------------------------------------------------------------

Any suggestions?
Oli
 
Reply With Quote
 
Starshine Moonbeam
Guest
Posts: n/a
 
      12-25-2004
In article <7oizd.6108$(E-Mail Removed)>, Oli Filth
((E-Mail Removed)) dropped a +5 bundle of words...

> Erik Ginnerskov wrote:
> > Oli Filth wrote:
> >
> >
> >>I'm creating a DIV to hold a short article and an associated image,
> >>and I want the image on the left.

> >
> >
> >>However, with this set-up (as you can see in the example if your
> >>browser window is wide enough), the containing DIV only stretches
> >>down as far as the end of the text, not the end of the image.

> >
> >
> > <div>
> > <p style="float:left;margin-right:15px;margin-top:0"><img src....></p>
> > <p style="margin-top:0">Associated text here</p>
> > </div>
> >
> > <div style="clear:both"> <!-- next block -->
> >
> > The 'margin-top' attributes make sure the upper line of the image at of the
> > text equals in all browsers.
> >

>
> Nope, that doesn't help (except for the clear:both). The IMG still goes
> past the bottom of the DIV (see http://olifilth.co.uk/test5.htm). I want:
>
> --------------------------------------------------------------
> | ----------------- DIV |
> | | | Blah blah blah blah blah blah blah blah |
> | | | Blah blah blah blah blah blah blah blah |
> | | IMG | Blah blah blah blah blah blah blah blah |
> | | | Blah blah blah blah blah blah blah blah. |
> | | | |
> | | | |
> | ----------------- |
> --------------------------------------------------------------
>
> Any suggestions?
> Oli
>


<style>
img {float:left}
</style>

<div>
<p><img src="beer.jpg"/></p>
<p>Text and stuff goes here very nicely.</p>
</div>

--
Starshine Moonbeam
mhm31x9 Smeeter#29 WSD#30
sTaRShInE_mOOnBeAm aT HoTmAil dOt CoM









 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      12-25-2004
Starshine Moonbeam wrote:
> In article <7oizd.6108$(E-Mail Removed)>, Oli Filth
> ((E-Mail Removed)) dropped a +5 bundle of words...
>
>
>>Erik Ginnerskov wrote:
>>
>>>Oli Filth wrote:
>>>
>>>
>>>
>>>>I'm creating a DIV to hold a short article and an associated image,
>>>>and I want the image on the left.
>>>
>>>
>>>>However, with this set-up (as you can see in the example if your
>>>>browser window is wide enough), the containing DIV only stretches
>>>>down as far as the end of the text, not the end of the image.
>>>
>>>
>>><div>
>>><p style="float:left;margin-right:15px;margin-top:0"><img src....></p>
>>><p style="margin-top:0">Associated text here</p>
>>></div>
>>>
>>><div style="clear:both"> <!-- next block -->
>>>
>>>The 'margin-top' attributes make sure the upper line of the image at of the
>>>text equals in all browsers.
>>>

>>
>>Nope, that doesn't help (except for the clear:both). The IMG still goes
>>past the bottom of the DIV (see http://olifilth.co.uk/test5.htm). I want:
>>
>>--------------------------------------------------------------
>>| ----------------- DIV |
>>| | | Blah blah blah blah blah blah blah blah |
>>| | | Blah blah blah blah blah blah blah blah |
>>| | IMG | Blah blah blah blah blah blah blah blah |
>>| | | Blah blah blah blah blah blah blah blah. |
>>| | | |
>>| | | |
>>| ----------------- |
>>--------------------------------------------------------------
>>
>>Any suggestions?
>>Oli
>>

>
>
> <style>
> img {float:left}
> </style>
>
> <div>
> <p><img src="beer.jpg"/></p>
> <p>Text and stuff goes here very nicely.</p>
> </div>
>


That essentially takes me back to what I started with. See
http:/olifilth.co.uk/test6.htm for why that doesn't work!

Oli
 
Reply With Quote
 
Phoenix
Guest
Posts: n/a
 
      12-25-2004
Oli Filth wrote:

>
> That essentially takes me back to what I started with. See
> http:/olifilth.co.uk/test6.htm for why that doesn't work!
>
> Oli


*sigh* It's really very simple. Just take the

</DIV>
<P style="clear: both">

and basically flip it around to

<P style="clear: both">
</DIV>

Of course, this isn't good, semantically, so you should probably replace
the <p> with a <div>, but keep the clear: both.
 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      12-25-2004
Phoenix wrote:
> Oli Filth wrote:
>
>>
>> That essentially takes me back to what I started with. See
>> http:/olifilth.co.uk/test6.htm for why that doesn't work!
>>
>> Oli

>
>
> *sigh* It's really very simple. Just take the


I would have thought this should be simple too! But it's not, see below
for why (or maybe I'm just being slow today).

>
> </DIV>
> <P style="clear: both">
>
> and basically flip it around to
>
> <P style="clear: both">
> </DIV>
>
> Of course, this isn't good, semantically, so you should probably replace
> the <p> with a <div>, but keep the clear: both.


Thank you! That works in Firefox, e.g.:

CSS
===

IMG { float: left }
DIV.boxend { clear: both }
DIV.container { ... whatever ... }

HTML
====

<DIV style="story">
<IMG src="image.jpg">
... text ...
<DIV style="boxend"></DIV>
</DIV>

See http://olifilth.co.uk/test7.htm.

Except in Opera (7.54) and IE (6), where the container DIV
padding-bottom appears to be wrong cause the empty DIV gets finite
height, even if you set its CSS height, line-height, padding and margin
attributes to 0.

And in IE (6), it doesn't seem to be displaying the text in the
container DIV anymore unless you re-size the browser window (but I'm
assuming that's just IE playing its usual games).

Also, it's not great from the HTML 4.01 Strict, semantic, "no
presentation detail in the HTML" point of view. Is there not a way of
doing this through CSS alone, without having to stick filler into the
HTML? Or is this just a hack I'll have to live with?

Oli
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      12-25-2004
On Sat, 25 Dec 2004 17:27:08 GMT, Oli Filth
<(E-Mail Removed)> wrote:

[snip]

> However, with this set-up (as you can see in the example if your browser
> window is wide enough), the containing DIV only stretches down as far as
> the end of the text, not the end of the image.


Floated elements are removed from the normal flow so it cannot contribute
to the height of the containing DIV.

> How would one do this properly, so that the DIV graphically contains
> everything, regardless of whether the image or the text is "higher",
> using proper CSS layout rather than tables?


Set a minimum height for the container. The min-height property is fine
for modern browsers:

div.story {
/* ... */
min-height: 266px; /* [1] */
}

though you'll have to hack for compatibility with IE:

* html div.story {
/* The overflow property must be visible (the default). */
height: 266px;
}

Quirks-mode IE 6 and versions earlier than that will obviously suffer from
Microsoft's errant box model. You could either use a CSS hack to get
around that, or nest a DIV and only specify the height on that DIV and the
other properties (namely the padding and border) on the outer one.

Hope that helps,
Mike


[1] In case you're wondering where the 266 comes from, it's the height of
your image.

Merry Christmas

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
 
Reply With Quote
 
Henry
Guest
Posts: n/a
 
      12-26-2004
Oli Filth wrote:


Check this one.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Floating IMG inside DIV problem</title>

<style type="text/css">

body
{
background-color: #FFF;
padding: 12px;
margin: 0;
font-family: Verdana, Sans-Serif;
font-size: 100%;
}



p {
margin: 10px;
}

div#box {display: block;
margin: 0px auto;
width: 95%;
border: solid 1px #C2A6FF;
background: #F2FFFF;
text-align: center;}

</style>

</head>
<body>

<h1>Floating IMG inside DIV problem</h1>
<p>
In the example below, the yellow DIV contains both the text and the
image. The image
is floated to the left. However, this means that as you increase the
browser width,
the DIV only stretches down as far as the end of the text. Bummer.
</p>

<div id="box">

<img border="0" src="smile.gif" width="256" height="266"
align="left"></h4>
<p>Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>&nbsp;</p>
<p>Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>

<p align="center">And here all seems to be all right</p>

</body></html>
 
Reply With Quote
 
Phoenix
Guest
Posts: n/a
 
      12-26-2004
Oli Filth wrote:
> Phoenix wrote:
>> *sigh* It's really very simple. Just take the

>
>
> I would have thought this should be simple too! But it's not, see below
> for why (or maybe I'm just being slow today).
>


It's not just you, it seems. heh. I didn't really test my code, I just
thought it was weird that the clearing was OUTSIDE the box you were
supposed to stretch the image in, so I complained. Especially since I
remember having accomplished this before.

>> </DIV>
>> <P style="clear: both">
>>
>> and basically flip it around to
>>
>> <P style="clear: both">
>> </DIV>
>>
>> Of course, this isn't good, semantically, so you should probably
>> replace the <p> with a <div>, but keep the clear: both.

>
>
> Thank you! That works in Firefox, e.g.:
>
> CSS
> ===
>
> IMG { float: left }
> DIV.boxend { clear: both }
> DIV.container { ... whatever ... }
>
> HTML
> ====
>
> <DIV style="story">
> <IMG src="image.jpg">
> ... text ...
> <DIV style="boxend"></DIV>
> </DIV>
>
> See http://olifilth.co.uk/test7.htm.


Yeah. Looks fine in Konqueror (3.1.4) too, in case you care.

> Except in Opera (7.54) and IE (6), where the container DIV
> padding-bottom appears to be wrong cause the empty DIV gets finite
> height, even if you set its CSS height, line-height, padding and margin
> attributes to 0.
>
> And in IE (6), it doesn't seem to be displaying the text in the
> container DIV anymore unless you re-size the browser window (but I'm
> assuming that's just IE playing its usual games).


I can't see it in IE (I'm on Linux, and I have trouble with the Windows
Emulator at the moment. heh.) but I would guess that IE screws it up,
yes. It surprises me more that Opera would do something weird. (and that
I can observe myself, of course) It's like there's an extra line there
without any purpose.

I, of course (heh) figured out a way to fix it in Opera at least. It's
not the DIV causing the trouble at all, it's actually the P that comes
before it. Which means that if you try this:

CSS
===

DIV.story P { margin-bottom: 0; }

The extra "line" disappears in Opera. (You can also remove everything on
the DIV.boxend, except for the "clear: both". They are irrelevant.

> Also, it's not great from the HTML 4.01 Strict, semantic, "no
> presentation detail in the HTML" point of view. Is there not a way of
> doing this through CSS alone, without having to stick filler into the
> HTML? Or is this just a hack I'll have to live with?


A DIV /can/ be used for this purpose. It's not the most perfect way, but
it works, and it has as little semantic disturbance as I can think of.
CSS as of today is far from perfect, so until CSS3 or maybe even CSS4 is
completed (not to mention implemented), this is probably a hack that
must be lived with. Sadly.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
putting img above/bellow img ? Jopek HTML 7 04-26-2009 10:26 PM
Safari Select Obj Cannot Be Expanded Within Floating Div vunet Javascript 1 01-23-2008 08:04 PM
Problem: <img></img> Philipp Lenssen XML 15 07-03-2005 09:23 AM
how to download img from html img tag news.austin.rr.com ASP .Net 2 04-27-2005 06:25 PM
CSS: How to position a DIV below a floating DIV? Tamlyn Rhodes HTML 3 02-26-2004 10:33 PM



Advertisments