Floating an IMG within a DIV

[Oli Filth]

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

 

[Erik Ginnerskov]

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.

 

[Oli Filth]

Oli Filth wrote:




<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. |
| | | |
| | | |
| ----------------- |

 

[Starshine Moonbeam]

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. |
| | | |
| | | |
| ----------------- |

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

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

 

[Oli Filth]

<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

 

[Phoenix]

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.

 

[Oli Filth]

*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

 

[Michael Winter]

On Sat, 25 Dec 2004 17:27:08 GMT, Oli Filth

[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

 

[Henry]

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>

 

[Phoenix]

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.

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.

 

[Phoenix]

Oli Filth wrote:


Check this one.

<snip>

That was some nasty old-skool HTML. On top of everything, it didn't
validate, AND you are missing the point here, as the image isn't floated
at all. (See the subject of the original post)

 

[Phoenix]

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.

I forgot to mention that this solution is really pointless if you have
more than one paragraph, since the space between paragraphs will
disappear this way. Therefore, you will either have to use margin-top to
get the space, with :first-child to remove it from the first paragraph
(a solution which is not going to work in IE), or you must give your
last paragraph a class or id, so you can remove the margin-bottom on it
with CSS through that method. A little hacky, that as well, but it'll
work. And not be semantically messed up, at least.

 

[Henry]

<snip>

That was some nasty old-skool HTML. On top of everything, it didn't
validate, AND you are missing the point here, as the image isn't floated
at all. (See the subject of the original post)

Try this one. Works and does validate. I hate css! The simplest task
leads to a disaster!



-------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.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;}
img#bad {float: left;}
</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 id="bad" src="smile.gif" width="256" height="266"alt="pic">
<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>
<br>
<div align="center">And here all seems to be all right</div>

</body>
</html>

 

[Phoenix]

Try this one. Works and does validate. I hate css! The simplest task
leads to a disaster!

I'm sorry, but it doesn't work. Once I make the text shorter than the
height of the image (which also is part of the point here...) your
example certainly stops working the way Oli wants. Be sure to test what
you say before you tell people it works. (And I'm not trying to sound
superior or something, it's just that.. you're not right. )

 

[Richard]

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

Simple solution, make your main division a tad higher than the image, or
resize the image to fit.
You'd be better off with two a colum affair.
Float the divisions, not the image.
Use a container division for both and define a height for it.

Without a defined height, the image will fit where it needs to.

 

[Richard]

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>

My tried and trued method is this:

#container { height:400px; width:400px;}
#box1 { width:150px; float:left;}
#box2 {width:250px;}

<div id="container">
<div id="box1">
<img src="smiley.gif">
</div>
<div id="box2">
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.
</div>
</div>

The inner divisions do not break when the window is resized.
If need be, define a paragraph element for the text.

 

[Henry]

I'm sorry, but it doesn't work. Once I make the text shorter than the
height of the image (which also is part of the point here...) your
example certainly stops working the way Oli wants. Be sure to test what
you say before you tell people it works. (And I'm not trying to sound
superior or something, it's just that.. you're not right. )

So... show me what DOES work, OK?

I would like to learn seomething USEFUL.


;-)

 

[Oli Filth]

I forgot to mention that this solution is really pointless if you have
more than one paragraph, since the space between paragraphs will
disappear this way. Therefore, you will either have to use margin-top to
get the space, with :first-child to remove it from the first paragraph
(a solution which is not going to work in IE), or you must give your
last paragraph a class or id, so you can remove the margin-bottom on it
with CSS through that method. A little hacky, that as well, but it'll
work. And not be semantically messed up, at least.

Just tried it with multiple paragraphs, it actually works fine, without
resorting to hacky stuff! As long as paragraphs have a non-zero
margin-top, then the inter-paragraph space will not disappear.

Thanks very much for all your help, I've made progress at last .

Oli

 

[Duende]

While sitting in a puddle Richard scribbled in the mud:

Simple solution,

Steal a site like Richard the Stupid.

 

[Henry]

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

One week and no one knows, huh?

It's possible, but what price you have to pay and how many tricks you
have to do to make it happening?

When everything fails, use faithful tables.

Works perfectly in every browser and validates.

You can do magic with tables and a moderate use of css.

The mix is the answer for FAST, efficient and cross browsing compatible
web design.

Time is money! Pure css is a waste a *lot* of time.

The best css' pure pages are...css soup, multiply css's with hacks for
compatibilities.

KISS...

BTW. Of course you can further use css to make that table... ummm...
more modern, but... again...

KISS

-------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>
<!--
p {margin: 12px;}

img#bad {float: left; padding: 12px;}

-->
</style>
</head>

<body>

<div align="center">
<table border="0" width="70%" cellspacing="1" cellpadding="0"
bgcolor="#C0C0C0">
<tr>
<td bgcolor="#FFFFFF" valign="top" align="left">&nbsp;<p align="center">
<img id="bad" src="smile.gif" width="256" height="266"alt="pic">
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.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.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>
</td>
</tr>
</table>
</div>

</body>

</html>