CSS: Squeezing DIVs Together

Discussion in 'HTML' started by Leo J. Hart IV, Apr 27, 2004.

  1. 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
    Leo J. Hart IV, Apr 27, 2004
    #1
    1. Advertising

  2. Leo J. Hart IV

    brucie Guest

    brucie, Apr 27, 2004
    #2
    1. Advertising

  3. 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 <> wrote in message news:<c6mjdv$dor93$-berlin.de>...
    > in post: <news:>
    > (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-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, Apr 28, 2004
    #3
  4. Leo J. Hart IV

    brucie Guest

    in post: <news:>
    (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-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/


    > 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
    brucie, Apr 28, 2004
    #4
  5. Leo J. Hart IV

    brucie Guest

    in post: <news:c6odoo$eh9h8$-berlin.de>
    brucie <> 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
    brucie, Apr 28, 2004
    #5
  6. Leo J. Hart IV

    brucie Guest

    in post: <news:c6odvo$eh9h8$-berlin.de>
    brucie <> 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.info/min-width-thingy.shit

    --
    b r u c i e
    brucie, Apr 28, 2004
    #6
  7. Leo J. Hart IV

    Whitecrest Guest

    In article <>,
    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
    Whitecrest, Apr 28, 2004
    #7
  8. Leo J. Hart IV

    Grahammer Guest

    "Whitecrest" <> wrote in message
    news:...
    > In article <>,
    > 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.
    Grahammer, Apr 28, 2004
    #8
  9. Leo J. Hart IV

    Whitecrest Guest

    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
    Whitecrest, Apr 28, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Daniele Cremonini

    Problem in squeezing the response

    Daniele Cremonini, Aug 11, 2003, in forum: Java
    Replies:
    0
    Views:
    312
    Daniele Cremonini
    Aug 11, 2003
  2. Asif Kazi

    squeezing the use of memory

    Asif Kazi, Oct 12, 2003, in forum: Java
    Replies:
    4
    Views:
    445
    Jon Skeet
    Oct 13, 2003
  3. rich
    Replies:
    0
    Views:
    721
  4. kaniga
    Replies:
    2
    Views:
    481
    kaniga
    Jan 15, 2008
  5. Oscar
    Replies:
    2
    Views:
    140
    Evertjan.
    Aug 27, 2009
Loading...

Share This Page