How to fix width of DIV that contains floated elements?


Tags: css

Problem :

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


Solution :

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.


    CSS Howto..

    How to make pixel perfect font in css?

    How to make a grid (like graph paper grid) with just css?

    Css radio buttons problem - How to style each radio button?

    How to center a block of social icon background images?

    How to use CSS to make an input fields behaves like a button click?

    How to position children with respect to parent in CSS?

    show different content in multiple css popups

    Creating a calendar control using CSS: How to auto layout events

    How to make onmouseover on menu link change background image?

    How to add scrollable tooltip HTML?

    How to include PHP code in CSS?

    CSS how to keep text always inline with a paragraph

    CSS: how to make a span only as wide as its content

    How to use inline CSS by th:style using “The ? : operator” in ThymeLeaf

    How to handle CSS unable to load resource error

    how to write a css that only can be visible on desktop in bootstrap

    How to remove whitespace that appears after relative positioning an element with CSS

    How to make the jQuery datePicker popup opaque and always in the foreground?

    How to associate CSS classes? For example, the “apple” class is also from the “fruit” class?

    how to position a search bar in html/css

    How to design this html Box for legacy browsers

    How to override mixins in LESS CSS 1.4+

    how to get the css floating property to work with four divs?

    How to add font awesome in CSS

    How to make a all the three tables to display at same height

    How do you modify wordpress css for posts?

    How do I implement search?

    how to connect circles with lines without ovelaping

    How do I specify a css selector which matches exactly one of multiple values?

    How do you center a line-wrapped