How to fix width of DIV that contains floated elements?_问答_开发者

I have a DIV container with several inner DIVs layed out by floating them all left. The inner DIVs may change width on certain events, and the containing DIV adjusts accordin开发者_Go百科gly. I use float:left in the container to keep it shrunk to the width of the inner divs. I use float:left in the inner divs so the layout is clean even when their contents change.

The catch is that I want the DIV container width and height to remain constant, UNLESS a particular event causes a change to the inner widths. Conceptually I want to use float on the inners for the layout benefit, but then I want to "fix" them so they don't float around. So if the container is 700px wide, I want it to remain so even if the user narrows the browser window. I'd like the container, and it's internal DIVs to just be clipped by the browser window.

I sense this can all be done nicely in CSS, I just can't quite figure out how. I'm not averse to adding another container if necessary...

Since the only desired layout changes are event-based, I am also willing to use a bit of JS. But is this necessary? (And I'm still not sure I know what to modify: container dimensions? inner floatiness? other?)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">

      #canvas {
        overflow:auto;   /* for clearing floats */
      }

      #container {
        float:left;   /* so container shrinks around contained divs */
        border:thin solid blue;
      }

      .inner {
        float:left;   /* so inner elems line up nicely w/o saying fixed coords */
        padding-top:8px;
        padding-bottom:4px;
        padding-left:80px;
        padding-right:80px;
      }

      #inner1 {
        background-color:#ffdddd;
      }

      #inner2 {
        background-color:#ddffdd;
      }

      #inner3 {
        background-color:#ddddff;
      }

    </style>
  </head>
  <body>
    <div id="canvas">
      <div id="container">
        <div id="inner1" class="inner">
        inner 1
        </div>
        <div id="inner2" class="inner">
        inner 2
        </div>
        <div id="inner3" class="inner">
        inner 3
        </div>
      </div>
    </div>
    cleared element
  </body>
</html>

If I understand you correctly, what you could do is to get rid of the floats, and lay out using display:inline-block. That way, as long as you ensure there are no spaces or newlines between the inner-divs it will be treated as a single word by the layout engine, and will stay on a single line (thus enlarging the containing <div> and/or overflowing if needed. You can use min-width and text-align:center for some stylistic improvements. Spacing between the elements can be created by using margin attributes on the inner <div>s.

As long as you set the container's width to 700px or whatever number in the css, the elements shouldn't float around. Also keep in mind that display: inline-block isn't supported by IE 7 and below.

For future reference, here's the code, modified to use Paul's solution. It's simpler in that it doesn't use floats. Just beware the white space between divs. This isn't a problem in my real-world situation because the divs are generated using javascript/DOM.

I posted this as an answer, not a comment, to get the code formatting.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">

      #container {
        display:inline-block;
        overflow:hidden;
        white-space:nowrap;
        border:thin solid blue;
      }

      .inner {
        display:inline-block;
        padding-top:8px;
        padding-bottom:4px;
        padding-left:180px;
        padding-right:80px;
      }

      #inner1 {
        background-color:#ffdddd;
      }

      #inner2 {
        background-color:#ddffdd;
      }

      #inner3 {
        background-color:#ddddff;
      }

    </style>
  </head>
  <body>
    <div id="container">
      <div id="inner1" class="inner">
      inner 1
      </div><div id="inner2" class="inner">
      inner 2
      </div><div id="inner3" class="inner">
      inner 3
      </div>
    </div>
  </body>
</html>