Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS: Squeezing DIVs Together

Reply
Thread Tools

CSS: Squeezing DIVs Together

 
 
Leo J. Hart IV
Guest
Posts: n/a
 
      04-27-2004
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
 
Reply With Quote
 
 
 
 
brucie
Guest
Posts: n/a
 
      04-27-2004
in post: <news:(E-Mail Removed). com>
http://www.velocityreviews.com/forums/(E-Mail Removed) (Leo J. Hart IV) said:

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

not supported by IE.

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

--
b r u c i e


 
Reply With Quote
 
 
 
 
Leo J. Hart IV
Guest
Posts: n/a
 
      04-28-2004
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 <****@bruciesusenetshit.info> wrote in message news:<c6mjdv$dor93$(E-Mail Removed)-berlin.de>...
> in post: <news:(E-Mail Removed). com>
> (E-Mail Removed) (Leo J. Hart IV) said:
>
> > 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-widthxxx
>
> not supported by IE.
>
> IE fix:
> http://www.doxdesk.com/software/js/minmax.html
> http://www.svendtofte.com/code/max_width_in_ie/

 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      04-28-2004
in post: <news:(E-Mail Removed). com>
(E-Mail Removed) (Leo J. Hart IV) said:

>>> 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-widthxxx
>> not supported by IE.
>> IE fix:
>> http://www.doxdesk.com/software/js/minmax.html
>> http://www.svendtofte.com/code/max_width_in_ie/


> 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

--
b r u c i e


 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      04-28-2004
in post: <news:c6odoo$eh9h8$(E-Mail Removed)-berlin.de>
brucie <****@bruciesusenetshit.info> said:

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


--
b r u c i e


 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      04-28-2004
in post: <news:c6odvo$eh9h8$(E-Mail Removed)-berlin.de>
brucie <****@bruciesusenetshit.info> said:

> 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.in...th-thingy.****

--
b r u c i e


 
Reply With Quote
 
Whitecrest
Guest
Posts: n/a
 
      04-28-2004
In article <(E-Mail Removed) >,
(E-Mail Removed) says...
> 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.

--
Whitecrest Entertainment
www.whitecrestent.com
 
Reply With Quote
 
Grahammer
Guest
Posts: n/a
 
      04-28-2004

"Whitecrest" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed).. .
> In article <(E-Mail Removed) >,
> (E-Mail Removed) says...
> > 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.


Never heard of dynamic content?

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


 
Reply With Quote
 
Whitecrest
Guest
Posts: n/a
 
      04-28-2004
In article <jSSjc.298089$oR5.46886@pd7tw3no>, postmaster@127.0.0.1
says...
> > 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?


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)
--
Whitecrest Entertainment
www.whitecrestent.com
 
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
Error squeezing flash: Help atcat Cisco 4 09-23-2008 02:48 PM
swapping divs -- when divs NOT positioned absolutely.. maya Javascript 4 11-16-2007 05:11 PM
Managing divs within divs.... rich HTML 0 02-02-2006 07:38 PM
squeezing the use of memory Asif Kazi Java 4 10-13-2003 11:52 AM
Problem in squeezing the response Daniele Cremonini Java 0 08-11-2003 01:03 PM



Advertisments