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