How to prevent a float:left DIV from wrapping?

Discussion in 'HTML' started by plenty900@yahoo.com, Jan 31, 2008.

  1. Guest

    Hi folks,

    Another question for you:

    If I have multiple DIVs side by side using "float: left", and one
    happens
    to be very wide, how do I ensure that it doesn't wrap?

    I have found that for some reason the width of the text inside
    is taking precedence, when I want the text inside to wrap
    within the DIV.

    However I don't want to set the width of the DIV, because it is
    a DIV that must grow and shrink when the window is resized.

    Thanks!
    , Jan 31, 2008
    #1
    1. Advertising

  2. Ben C Guest

    On 2008-01-31, <> wrote:
    > Hi folks,
    >
    > Another question for you:
    >
    > If I have multiple DIVs side by side using "float: left", and one
    > happens
    > to be very wide, how do I ensure that it doesn't wrap?
    >
    > I have found that for some reason the width of the text inside
    > is taking precedence


    Yes, that's how it works. The text helps itself to as much space as it
    needs up to the maximum available, where available means the full
    content width of the container, _not_ the space to the right of any
    other floats that are already in the way. If it no longer fits in that
    gap, it drops down.

    [...]
    > However I don't want to set the width of the DIV, because it is
    > a DIV that must grow and shrink when the window is resized.


    There is a trick you can do here with block formatting contexts, which
    although not guaranteed by the specification, works in today's browsers.

    Try this:

    <style type="text/css">
    .left
    {
    float: left;
    width: 15em;
    background-color: palegreen;
    border: 2px solid blue;
    }
    .right
    {
    /*
    * This div squeezes into whatever space remains to the
    * right of the float and doesn't jump down. Note that the
    * CSS 2.1 specification does allow it jump down if that's
    * what implementors want to do though. It's just lucky so
    * far none of them do.
    */
    border: 2px solid blue;
    overflow: hidden;
    }
    </style>

    ....
    <div class="left">
    Left column
    </div>
    <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    Ben C, Jan 31, 2008
    #2
    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. paul
    Replies:
    1
    Views:
    592
  2. Kate
    Replies:
    4
    Views:
    620
  3. bd
    Replies:
    0
    Views:
    604
  4. Carsten Fuchs
    Replies:
    45
    Views:
    1,505
    James Kanze
    Oct 8, 2009
  5. lawrence
    Replies:
    13
    Views:
    285
    Thomas 'PointedEars' Lahn
    Sep 4, 2004
Loading...

Share This Page