CSS: Squeezing DIVs Together

[Leo J. Hart IV]

Here's what I'm trying to do in IE 6+. I have 3 blocks:

<div id="DIV1">
</div>
<div id="DIV2">
</div>
<div id="DIV3">
</div>

I want them to look like this:
________________________________________
|****** ****** ******|
|* * * * * *|
|*DIV1* *DIV2* *DIV3*|
|* * * * * *|
|* * * * * *|
|****** ****** ******|

Where DIV 1 and 2 are floated left and DIV 3 is floated right.

The CSS I have created to do this is

#DIV1 {
float: left;
}
#DIV2 {
float: left;
}
#DIV3 {
float: right;
}

This works great, except that when a user reduces the size of the
window horizontally, if the DIVs touch each other, the second one
falls below the first one. I'm sure this is by design. What I want
is for the DIVs just to squeeze as close as possible to each other and
then stop, causing the horizontal toolbar to appear on the browser
window, similar to how a table cell works (maybe I should use a table
cell here, but I'm trying to get away from using tables for
positioning).

Any suggestions?

Thanks,
Leo Hart

 

[brucie]

What I want is for the DIVs just to squeeze as close as possible to
each other and then stop, causing the horizontal toolbar to appear on
the browser window,

min-width:xxxx

not supported by IE.

IE fix:
http://www.doxdesk.com/software/js/minmax.html
http://www.svendtofte.com/code/max_width_in_ie/

 

[Leo J. Hart IV]

Thanks, these links will be very useful. However, min-width requires
that I know the size of the contents within the DIV. What happens if
I do not know this (which is the case)? Is there another way?

Thanks,
Leo

 

[brucie]

Thanks, these links will be very useful. However, min-width requires
that I know the size of the contents within the DIV.

no it doesn't, it just suggests the minimum width for it.

What happens if I do not know this (which is the case)? Is there
another way?

you must have some idea what is going to go in the <div>s. decide on the
minimum width that is acceptable for that content. for example if its
text then the min width should be greater than just a few words. if its
an image then it should be equal or greater than the image width.

your <div>s are floated so you must have come to some decision on their
width, now all you need to do is decide what their min width should be
that will still maintain your look. simple.

please don't toppost, it upsets the little voices

How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

 

[brucie]

in post: <

your <div>s are floated so you must have come to some decision on their
width, now all you need to do is decide what their min width should be
that will still maintain your look. simple.

i got so excited babbling i forgot the important bit. the min width goes
on the element containing the three floated <div>s. if they're not in an
element it may be a good idea to stick them in one.

 

[brucie]

in post: <

i got so excited babbling i forgot the important bit. the min width goes
on the element containing the three floated <div>s. if they're not in an
element it may be a good idea to stick them in one.

a demo: http://moreshit.bruciesusenetshit.info/min-width-thingy.shit

 

[Whitecrest]

Thanks, these links will be very useful. However, min-width requires
that I know the size of the contents within the DIV. What happens if
I do not know this (which is the case)? Is there another way?

Unless the user is putting things on your site, how can not not know the
(physical) size of everything that you write to the browser? It is your
code.

 

[Grahammer]

Unless the user is putting things on your site, how can not not know the
(physical) size of everything that you write to the browser? It is your
code.

Never heard of dynamic content?

....and I do personally have sites that have attributes that the user can
alter.

 

[Whitecrest]

Never heard of dynamic content?

Even though I DISPLAY content dynamically, I already know the size of
everything. Dynamic or not, it is still my content. (with the exception
of allowing the user to upload things)