making a bottom margin

[meltedown]

I have 2 left floating divs on a page. Sometime the left side is larger,
sometimes the right side is larger. I want the page to have a margin at
the bottom of whichever div is the largest.

If I put a bottom margin on one of the divs, it might not be the largest
div, in which case the margin won't show up. If I put the margin on both
divs, when the right floats below the left side in a small window, there
is too much margin between the two divs.

So whats the best way to add a bottom-margin to the page ?

[meltedown]

meltedown wrote:

I have 2 left floating divs on a page. Sometime the left side is larger,
sometimes the right side is larger. I want the page to have a margin at
the bottom of whichever div is the largest.

If I put a bottom margin on one of the divs, it might not be the largest
div, in which case the margin won't show up. If I put the margin on both
divs, when the right floats below the left side in a small window, there
is too much margin between the two divs.

So whats the best way to add a bottom-margin to the page ?

I figured it out after I read
http://www.complexspiral.com/publica...aining-floats/

"In most browsers, and as defined in CSS2.1, a floated element will
expand to contain any floated elements that descend from it."

I never knew that, and I think this solves some major headaches I have
always had with floating divs. How many times have tried to put a border
around floating divs and given up in frustration. Quite a few. All I had
to do was float the wrapper.

- So one solution to this this bottom margin problem is to put the two
floating divs in another floating div and give that div a bottom margin.

I had tried (many times) wrapping the two divs in a another but they
always escaped the wrapper. Floating the wrapper prevents that.

[Spartanicus]

meltedown <gr*****@reenie.org> wrote:

I have 2 left floating divs on a page. Sometime the left side is larger,
sometimes the right side is larger. I want the page to have a margin at
the bottom of whichever div is the largest.

If I put a bottom margin on one of the divs, it might not be the largest
div, in which case the margin won't show up. If I put the margin on both
divs, when the right floats below the left side in a small window, there
is too much margin between the two divs.

So whats the best way to add a bottom-margin to the page ?
I figured it out after I read
http://www.complexspiral.com/publica...aining-floats/

"In most browsers, and as defined in CSS2.1, a floated element will
expand to contain any floated elements that descend from it."

Not defining a width for floated elements is bad form, CSS 2.0 compliant
browsers should also be catered for. Also note that floating elements
for other purposes than to have inline content flow beside and beneath
it is a nasty hack that should be avoided when possible.
I never knew that, and I think this solves some major headaches I have
always had with floating divs. How many times have tried to put a border
around floating divs and given up in frustration. Quite a few. All I had
to do was float the wrapper.

All you had to do is understand that floating the "inner" divs is what
got you into trouble in the first place, piling more trouble on top of
that isn't the answer.

--
Spartanicus

[meltedown]

Spartanicus wrote:

meltedown <gr*****@reenie.org> wrote:

I have 2 left floating divs on a page. Sometime the left side is larger,
sometimes the right side is larger. I want the page to have a margin at
the bottom of whichever div is the largest.

If I put a bottom margin on one of the divs, it might not be the largest
div, in which case the margin won't show up. If I put the margin on both
divs, when the right floats below the left side in a small window, there
is too much margin between the two divs.

So whats the best way to add a bottom-margin to the page ?

I figured it out after I read
http://www.complexspiral.com/publica...aining-floats/

"In most browsers, and as defined in CSS2.1, a floated element will
expand to contain any floated elements that descend from it."

Not defining a width for floated elements is bad form, CSS 2.0 compliant
browsers should also be catered for. Also note that floating elements
for other purposes than to have inline content flow beside and beneath
it is a nasty hack that should be avoided when possible.

I never knew that, and I think this solves some major headaches I have
always had with floating divs. How many times have tried to put a border
around floating divs and given up in frustration. Quite a few. All I had
to do was float the wrapper.

All you had to do is understand that floating the "inner" divs is what
got you into trouble in the first place, piling more trouble on top of
that isn't the answer.

Well now I'm really confused. How else do I get the divs to be side by
side instead of below one another ?

[Greg Heilers]

Spartanicus wrote:

meltedown <gr*****@reenie.org> wrote:

I have 2 left floating divs on a page. Sometime the left side is larger,
sometimes the right side is larger. I want the page to have a margin at
the bottom of whichever div is the largest.

If I put a bottom margin on one of the divs, it might not be the largest
div, in which case the margin won't show up. If I put the margin on both
divs, when the right floats below the left side in a small window, there
is too much margin between the two divs.

So whats the best way to add a bottom-margin to the page ?
I figured it out after I read
http://www.complexspiral.com/publica...aining-floats/

"In most browsers, and as defined in CSS2.1, a floated element will
expand to contain any floated elements that descend from it."

Not defining a width for floated elements is bad form, CSS 2.0 compliant
browsers should also be catered for. Also note that floating elements
for other purposes than to have inline content flow beside and beneath
it is a nasty hack that should be avoided when possible.

How should we interpret this? Does "inline content" mean elements
that are of "official" {display:inline;} type; or does it more
loosely refer to *any* elements that are presented as "inline", or
"side-by-side"?

I never knew that, and I think this solves some major headaches I have
always had with floating divs. How many times have tried to put a border
around floating divs and given up in frustration. Quite a few. All I had
to do was float the wrapper.

All you had to do is understand that floating the "inner" divs is what
got you into trouble in the first place, piling more trouble on top of
that isn't the answer.

--

Greg Heilers
Registered Linux user #328317 - SlackWare 10.1 (2.6.10)
.....
It's okay, Marge. I've learned my lesson. A mountain of sugar is too
much for one man. It's clear now why God portions it out in those
tiny packets, and why he lives on a plantation in Hawaii.

-- Homer Simpson
Lisa's Rival

[Spartanicus]

meltedown <gr*****@reenie.org> wrote:

All you had to do is understand that floating the "inner" divs is what
got you into trouble in the first place, piling more trouble on top of
that isn't the answer.

Well now I'm really confused. How else do I get the divs to be side by
side instead of below one another ?

There is no easy answer to that question.

--
Spartanicus

[Spartanicus]

Greg Heilers <gN************@earthNOSPAMlink.net> wrote:

Not defining a width for floated elements is bad form, CSS 2.0 compliant
browsers should also be catered for. Also note that floating elements
for other purposes than to have inline content flow beside and beneath
it is a nasty hack that should be avoided when possible.

How should we interpret this? Does "inline content" mean elements
that are of "official" {display:inline;} type; or does it more
loosely refer to *any* elements that are presented as "inline", or
"side-by-side"?

Typically text, sometimes images, inline-block elements etc.

--
Spartanicus

[meltedown]

Spartanicus wrote:

meltedown <gr*****@reenie.org> wrote:

All you had to do is understand that floating the "inner" divs is what
got you into trouble in the first place, piling more trouble on top of
that isn't the answer.

Well now I'm really confused. How else do I get the divs to be side by
side instead of below one another ?

There is no easy answer to that question.

Are you pulling my leg ? If you can't use floats to make divs float,
then what are floats for ?

[Gus Richter]

meltedown wrote:

meltedown wrote:

I have 2 left floating divs on a page. Sometime the left side is
larger, sometimes the right side is larger. I want the page to have a
margin at the bottom of whichever div is the largest.

If I put a bottom margin on one of the divs, it might not be the
largest div, in which case the margin won't show up. If I put the
margin on both divs, when the right floats below the left side in a
small window, there is too much margin between the two divs.

So whats the best way to add a bottom-margin to the page ?

I figured it out after I read
http://www.complexspiral.com/publica...aining-floats/

"In most browsers, and as defined in CSS2.1, a floated element will
expand to contain any floated elements that descend from it."

I never knew that, and I think this solves some major headaches I have
always had with floating divs. How many times have tried to put a border
around floating divs and given up in frustration. Quite a few. All I had
to do was float the wrapper.

- So one solution to this this bottom margin problem is to put the two
floating divs in another floating div and give that div a bottom margin.

I had tried (many times) wrapping the two divs in a another but they
always escaped the wrapper. Floating the wrapper prevents that.

Since a floated item is out of the normal flow, it presents no height as
far as other items on the page are concerned. Place a border on your
div(s) to convince yourself. That is why I believe you are looking to
add a bottom margin.

I don't know what your two divs contain or what the purpose is, but I
would suggest that you should float one of the divs and non-float the
other, thereby allowing it to automatically flow beside the other. You
will not need to worry about bottom margin then, since the float box now
has a height.

--
Gus

[meltedown]

Gus Richter wrote:

meltedown wrote:

meltedown wrote:

I have 2 left floating divs on a page. Sometime the left side is
larger, sometimes the right side is larger. I want the page to have a
margin at the bottom of whichever div is the largest.

If I put a bottom margin on one of the divs, it might not be the
largest div, in which case the margin won't show up. If I put the
margin on both divs, when the right floats below the left side in a
small window, there is too much margin between the two divs.

So whats the best way to add a bottom-margin to the page ?
I figured it out after I read
http://www.complexspiral.com/publica...aining-floats/

"In most browsers, and as defined in CSS2.1, a floated element will
expand to contain any floated elements that descend from it."

I never knew that, and I think this solves some major headaches I have
always had with floating divs. How many times have tried to put a
border around floating divs and given up in frustration. Quite a few.
All I had to do was float the wrapper.

- So one solution to this this bottom margin problem is to put the
two floating divs in another floating div and give that div a bottom
margin.

I had tried (many times) wrapping the two divs in a another but they
always escaped the wrapper. Floating the wrapper prevents that.

Since a floated item is out of the normal flow, it presents no height as
far as other items on the page are concerned. Place a border on your
div(s) to convince yourself. That is why I believe you are looking to
add a bottom margin.

Right, I just want some empty space at the bottom of the page. The
borders on the floating divs show up fine, but if I put them in a
wrapper, the border on the wrapper only shows up if the wrapper is
floated. But Spartanicus says that's bad.....
I don't know what your two divs contain or what the purpose is, but I
would suggest that you should float one of the divs and non-float the
other, thereby allowing it to automatically flow beside the other. You
will not need to worry about bottom margin then, since the float box now
has a height.

This doesn't make any sense to me. If I float just the left side then it
acts like nothing is floated, ie when I make the window small the right
side does not float to the bottom and I have a scroll bar across the
bottom.

If I float just the right side the left side is always at the bottom no
matter how big the window is.

Am I missing something ?

[Stephen Poley]

On Sun, 13 Nov 2005 05:06:07 GMT, meltedown <gr*****@reenie.org> wrote:

Right, I just want some empty space at the bottom of the page. The
borders on the floating divs show up fine, but if I put them in a
wrapper, the border on the wrapper only shows up if the wrapper is
floated. But Spartanicus says that's bad.....

I haven't really been following this thread, but have you tried putting
an element in the "wrapper" after the floated elements with the clear
property on it That is the usually way of doing what I think you are
trying to do.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[meltedown]

Stephen Poley wrote:

On Sun, 13 Nov 2005 05:06:07 GMT, meltedown <gr*****@reenie.org> wrote:

Right, I just want some empty space at the bottom of the page. The
borders on the floating divs show up fine, but if I put them in a
wrapper, the border on the wrapper only shows up if the wrapper is
floated. But Spartanicus says that's bad.....

I haven't really been following this thread, but have you tried putting
an element in the "wrapper" after the floated elements with the clear
property on it That is the usually way of doing what I think you are
trying to do.

Yep, that did the trick. Thanks, thats what I wanted to know, how its
usually done.

[Spartanicus]

meltedown <gr*****@reenie.org> wrote:

Well now I'm really confused. How else do I get the divs to be side by
side instead of below one another ?

There is no easy answer to that question.

Are you pulling my leg ? If you can't use floats to make divs float,
then what are floats for ?

Again: (a) Floats are for having inline content flow beside and beneath
the floated element.

Floating is *not* a method to align elements.
Floating is *not* an appropriate method to create a "CSS layout".

If possible floats should be avoided except when used for their intended
purpose (a).

--
Spartanicus

[meltedown]

Spartanicus wrote:

meltedown <gr*****@reenie.org> wrote:

Well now I'm really confused. How else do I get the divs to be side by
side instead of below one another ?
There is no easy answer to that question.

Are you pulling my leg ? If you can't use floats to make divs float,
then what are floats for ?

Again: (a) Floats are for having inline content flow beside and beneath
the floated element.

Floating is *not* a method to align elements.
Floating is *not* an appropriate method to create a "CSS layout".

If possible floats should be avoided except when used for their intended
purpose (a).

Well then let me clarify, I want the two columns to flow beide and
beneath each other. Thets why I don't understand why you say it is a
mistake to float them . And I want a magin at the bottom of the page.
Two floating divs for the columns with the extra div with the clear
seems to work best of all.

[Spartanicus]

meltedown <gr*****@reenie.org> wrote:

Again: (a) Floats are for having inline content flow beside and beneath
the floated element.

Floating is *not* a method to align elements.
Floating is *not* an appropriate method to create a "CSS layout".

If possible floats should be avoided except when used for their intended
purpose (a).

Well then let me clarify, I want the two columns to flow beide and
beneath each other.

If that is correct (which I doubt), then they aren't columns.

--
Spartanicus

[meltedown]

Spartanicus wrote:

meltedown <gr*****@reenie.org> wrote:

Again: (a) Floats are for having inline content flow beside and beneath
the floated element.

Floating is *not* a method to align elements.
Floating is *not* an appropriate method to create a "CSS layout".

If possible floats should be avoided except when used for their intended
purpose (a).

So the obvious question is: if I want to align elements, and I don't
want the content to flow beside and beneath anything, should I just
tables ?

Like my home page, which has 3 columns, floated but not flowing. I don't
wnat it to flow. So should I just put the 3 columns in a table ?

[Spartanicus]

meltedown <gr*****@reenie.org> wrote:

Again: (a) Floats are for having inline content flow beside and beneath
the floated element.

Floating is *not* a method to align elements.
Floating is *not* an appropriate method to create a "CSS layout".

If possible floats should be avoided except when used for their intended
purpose (a).
So the obvious question is: if I want to align elements, and I don't
want the content to flow beside and beneath anything, should I just
tables ?

Tables are for marking up tabular data, not for formatting or layout.

Left aligning is the default for block level elements, use margins if
you want to right align a block level element, like so:
<div style="width:50%;margin-left:auto">foobar</div>

Right aligning inline level content is done with the text-align
property, like so:
<p style="text-align:right">Some text.</p>
Like my home page, which has 3 columns, floated but not flowing. I don't
wnat it to flow. So should I just put the 3 columns in a table ?

There are 2 proper ways to create a 3 column "CSS" layout: by using
absolute positioning or by using a CSS table. It should be noted that IE
doesn't support CSS tables. This has led to the widespread abuse of
floats, despite the fact that doing so causes a myriad of problems.
Floats used to create a "layout" is a hack, and a nasty one.

Like with floats, absolute positioning has the disadvantage that the
positioned elements are removed from the flow, this limits the layout
options, usage of for example a footer directly below the content may
not be an option.

--
Spartanicus

[meltedown]

Spartanicus wrote:

meltedown <gr*****@reenie.org> wrote:

Again: (a) Floats are for having inline content flow beside and beneath
the floated element.

Floating is *not* a method to align elements.
Floating is *not* an appropriate method to create a "CSS layout".

If possible floats should be avoided except when used for their intended
purpose (a).

Well then let me clarify, I want the two columns to flow beide and
beneath each other.

If that is correct (which I doubt), then they aren't columns.

You doubt that I want the two columns to flow ? That doesn't make any
sense. How can you know better than I what I want ?
And why aren't they columns ? Because they flow ? If thats true then
just about every example of a css column layout on the web is wrong. Are
you saying they are all wrong ? i don' get it.

[meltedown]

Spartanicus wrote:

meltedown <gr*****@reenie.org> wrote:

Again: (a) Floats are for having inline content flow beside and beneath
the floated element.

Floating is *not* a method to align elements.
Floating is *not* an appropriate method to create a "CSS layout".

If possible floats should be avoided except when used for their intended
purpose (a).

So the obvious question is: if I want to align elements, and I don't
want the content to flow beside and beneath anything, should I just
tables ?

Tables are for marking up tabular data, not for formatting or layout.

Left aligning is the default for block level elements, use margins if
you want to right align a block level element, like so:
<div style="width:50%;margin-left:auto">foobar</div>

Right aligning inline level content is done with the text-align
property, like so:
<p style="text-align:right">Some text.</p>

Like my home page, which has 3 columns, floated but not flowing. I don't
wnat it to flow. So should I just put the 3 columns in a table ?

There are 2 proper ways to create a 3 column "CSS" layout: by using
absolute positioning or by using a CSS table. It should be noted that IE
doesn't support CSS tables. This has led to the widespread abuse of
floats, despite the fact that doing so causes a myriad of problems.
Floats used to create a "layout" is a hack, and a nasty one.

Well thanks for clarifying. I always thought tha absolute positioning
was something to be be avoided. Not that I figured that out myself, its
read in books, on web pages and in this newgroup. ( a couple years ago).
It seems the advice is constantly changing.
I just wish I could learn how to make css layouts without it being a
night mare everytime I try to do anything.

Like with floats, absolute positioning has the disadvantage that the
positioned elements are removed from the flow, this limits the layout
options, usage of for example a footer directly below the content may
not be an option.

[Spartanicus]

meltedown <gr*****@reenie.org> wrote:

Again: (a) Floats are for having inline content flow beside and beneath
the floated element.

Floating is *not* a method to align elements.
Floating is *not* an appropriate method to create a "CSS layout".

If possible floats should be avoided except when used for their intended
purpose (a).
Well then let me clarify, I want the two columns to flow beide and
beneath each other.

If that is correct (which I doubt), then they aren't columns.

You doubt that I want the two columns to flow ?

Assuming that you mean the content inside the "columns", yes.
i don' get it.

Post a url to your site.

--
Spartanicus

[Gus Richter]

meltedown wrote:

Stephen Poley wrote:

On Sun, 13 Nov 2005 05:06:07 GMT, meltedown <gr*****@reenie.org> wrote:

Right, I just want some empty space at the bottom of the page. The
borders on the floating divs show up fine, but if I put them in a
wrapper, the border on the wrapper only shows up if the wrapper is
floated. But Spartanicus says that's bad.....

I haven't really been following this thread, but have you tried putting
an element in the "wrapper" after the floated elements with the clear
property on it That is the usually way of doing what I think you are
trying to do.

Yep, that did the trick. Thanks, thats what I wanted to know, how its
usually done.

You think, he thinks and I think.
It sure sounded like you wanted the divs side-by-side. Now it seems you
want the divs above-each-other.
After all this, I still don't know what you "really" _want_ or _need_.
Sounds like the suggestion and what you're going with is:
<div id="wrapper">
<div style="float:left;">blah blah</div>
<div style="clear:left;">more blah</div>
</div>
The above is the same as saying (because the wrapper does nothing):
<div style="float:left;">blah blah</div>
<div style="clear:left;">more blah</div>
And the below will give the same result (because they're blocks):
<div>blah blah</div>
<div>more blah</div>
Each renders the two divs on top of each other with bottom margin (white
space). So why the wrapper, floats and clears? The way it's usually done
depends on the situation.
Prime example for the need to show something with a URL me thinks, along
with a clear explanation of what is desired.

--
Gus

[meltedown]

Gus Richter wrote:

meltedown wrote:

Stephen Poley wrote:

On Sun, 13 Nov 2005 05:06:07 GMT, meltedown <gr*****@reenie.org> wrote:
Right, I just want some empty space at the bottom of the page. The
borders on the floating divs show up fine, but if I put them in a
wrapper, the border on the wrapper only shows up if the wrapper is
floated. But Spartanicus says that's bad.....


I haven't really been following this thread, but have you tried putting
an element in the "wrapper" after the floated elements with the clear
property on it That is the usually way of doing what I think you are
trying to do.
Yep, that did the trick. Thanks, thats what I wanted to know, how its
usually done.

You think, he thinks and I think.
It sure sounded like you wanted the divs side-by-side. Now it seems you
want the divs above-each-other.

I want them to float. To flow side by side on a large screen and one
below the other on a small screen. I don't have a wrapper.
After all this, I still don't know what you "really" _want_ or _need_.
Sounds like the suggestion and what you're going with is:
<div id="wrapper">
<div style="float:left;">blah blah</div>
<div style="clear:left;">more blah</div>
</div>
The above is the same as saying (because the wrapper does nothing):
<div style="float:left;">blah blah</div>
<div style="clear:left;">more blah</div>
And the below will give the same result (because they're blocks):
<div>blah blah</div>
<div>more blah</div>
Each renders the two divs on top of each other with bottom margin (white
space). So why the wrapper, floats and clears? The way it's usually done
depends on the situation.
Prime example for the need to show something with a URL me thinks, along
with a clear explanation of what is desired.

[Gus Richter]

meltedown wrote:

I want them to float. To flow side by side on a large screen and one
below the other on a small screen. I don't have a wrapper.

Back to scenario #1 and once again,

"I would *strongly* suggest that you should float one of the divs and
non-float the other, thereby allowing it to automatically flow beside
the other. You will not need to worry about bottom margin then, since
the float box now has a height."

If the non-floated item fits in the available and remaining width, it
will be rendered "beside" the floated item.

If the non-floated item does _not_ fit in the available and remaining
width, it will auto-clear the float and will be rendered "below" the
floated item (as on a small, or reduced, screen) where it will fit.

--
Gus

[Alan J. Flavell]

On Sun, 13 Nov 2005, Gus Richter wrote:

"I would *strongly* suggest that you should float one of the divs
and non-float the other, thereby allowing it to automatically flow
beside the other. You will not need to worry about bottom margin
then, since the float box now has a height."

If the non-floated item fits in the available and remaining width,
it will be rendered "beside" the floated item.

In practice, though, that risks a situation where the floated item
occupies most of the width, and then the non-floated item gets
squeezed into a narrow column alongside it and finally extrudes
around the bottom of the floated item.

On capable browsers, that could be avoided by specifying a min-width
for the non-floated item; but we all know what's the stumbling-block
with that.

I don't have an ideal answer, unfortunately, at the present state of
the browser population. Every near-solution seems to have its snags.

[Gus Richter]

Alan J. Flavell wrote:

On Sun, 13 Nov 2005, Gus Richter wrote:

"I would *strongly* suggest that you should float one of the divs
and non-float the other, thereby allowing it to automatically flow
beside the other. You will not need to worry about bottom margin
then, since the float box now has a height."

If the non-floated item fits in the available and remaining width,
it will be rendered "beside" the floated item.

In practice, though, that risks a situation where the floated item
occupies most of the width, and then the non-floated item gets
squeezed into a narrow column alongside it and finally extrudes
around the bottom of the floated item.

It's like with all things - one has to consider the content and how one
wishes to present it. One method is suitable for one situation and not
for another. There are many ways to skin a cat. (Disturbing saying since
I own two of them.)
On capable browsers, that could be avoided by specifying a min-width
for the non-floated item; but we all know what's the stumbling-block
with that.

I don't have an ideal answer, unfortunately, at the present state of
the browser population. Every near-solution seems to have its snags.

I don't seek out a universal method. There are too may variables. Each
situation calls for a different approach. I see no problem in that.

--
Gus

[meltedown]

Gus Richter wrote:

Alan J. Flavell wrote:

On Sun, 13 Nov 2005, Gus Richter wrote:

"I would *strongly* suggest that you should float one of the divs and
non-float the other, thereby allowing it to automatically flow beside
the other. You will not need to worry about bottom margin then, since
the float box now has a height."

If the non-floated item fits in the available and remaining width, it
will be rendered "beside" the floated item.

In practice, though, that risks a situation where the floated item
occupies most of the width, and then the non-floated item gets
squeezed into a narrow column alongside it and finally extrudes around
the bottom of the floated item.

It's like with all things - one has to consider the content and how one
wishes to present it. One method is suitable for one situation and not
for another. There are many ways to skin a cat. (Disturbing saying since
I own two of them.)

On capable browsers, that could be avoided by specifying a min-width
for the non-floated item; but we all know what's the stumbling-block
with that.

I don't have an ideal answer, unfortunately, at the present state of
the browser population. Every near-solution seems to have its snags.

I don't seek out a universal method. There are too may variables. Each
situation calls for a different approach. I see no problem in that.

Well just to make sure I understand both of you I made 2 versions of the
same page.
http://abctimeclock.com
This has 2 floated divs. The entire right hand column flows to the
bottom. The bottom margin is created with a cleared div at the bottom.
http://abctimeclock.com/index2.php
This has one floated div, the div on the left. The contents of the right
hand column get sqeezed befroe klit flows anywhere, and presumably this
is what Alan is talking about. The margin on the bottom is the from the
height of the left hand, floated div.

I don't see anything wrong with the first version, and the second
version is ugly.

[Gus Richter]

Alan J. Flavell wrote:

On Sun, 13 Nov 2005, Gus Richter wrote:

"I would *strongly* suggest that you should float one of the divs
and non-float the other, thereby allowing it to automatically flow
beside the other. You will not need to worry about bottom margin
then, since the float box now has a height."

If the non-floated item fits in the available and remaining width,
it will be rendered "beside" the floated item.

In practice, though, that risks a situation where the floated item
occupies most of the width, and then the non-floated item gets
squeezed into a narrow column alongside it and finally extrudes
around the bottom of the floated item.

On capable browsers, that could be avoided by specifying a min-width
for the non-floated item; but we all know what's the stumbling-block
with that.

I don't have an ideal answer, unfortunately, at the present state of
the browser population. Every near-solution seems to have its snags.

I haven't had time to look into this, beyond a quick once-over, but it
might be what you're looking for? It surely looks interesting.
<http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/>

--
Gus