Re: div/bg color issue.. ok, here's the deal....;)

On 2009-06-18, maya <maya778899@xxxxxxxxx> wrote:
Ben C wrote:
[...]
Well I would have your best shot at it and be prepared to discuss with
them the relative merits of some of the techniques you've seen, like:

1. Background images with repeat-y pretending to be column backgrounds.
2. Borders pretending to be column backgrounds.
3. Absolute positioning and z-index.
4. display: table-cell.
5. dorayme-style nesting (but you need to be able to rank the columns in
order of height)

I did at one point yesterday try "cascading" the divs on top of each
other with z-Index:0.. (giving the first div a margin-right of about
600px or whatever, then putting the 2nd "on top" with a margin-left and
z-Index:1, etc.. but that didn't work out too well.. (and bg-colors
still wouldn't fill entire div..)
(what is "dorayme-style"??)

It's the thing Jeff mentioned. IIRC it works something like this:

<div style="overflow: hidden" id="container">
<div style="float: left; width: 250px">
Left column contents. Left column has to be the one with more
stuff in it, so it's the higher of the two columns. Of
course you could use a right float etc. if the longer column
was on the right. Point is, the longer column is the float,
the shorter one normal-flow.
</div>
<div style="margin-left: 250px">
Right column contents. Shorter.
</div>
</div>

You set the left column's background on the float, and the right
column's background on the container, leaving the right column div
background: transparent (default anyway).

Because the container is overflow: hidden, it grows to the height of the
float (which we require to be the taller of the two columns).

For three columns, just nest again (old saw: there is no problem that
cannot be solved with another level of nesting).

Overflow: hidden to contain floats doesn't work in IE so either you use
some obscure proprietary crap like "zoom: 1", or, more pragmatically,
just insert <div style="clear:both"></div> after the two columns and
don't use overflow: hidden.
.

Relevant Pages

  • Re: Floating boxes dont extend containing box
    ... I have a containing DIV box into which I place floating boxes. ... the size of the containing box is not extended by the inner floating boxes. ... Without the float, it works as expected. ... In addition to working if you also float the container, it also works if you position it _absolutely_, or set any value of overflow other than visible. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: css problem (float)
    ... element in the normal flow that establishes a new block formatting ... not overlap any floats in the same block formatting context as the ... cells, positioned things, things with overflow other than visible. ... float: right; ...
    (alt.html)
  • Re: How to prevent a float:left DIV from wrapping?
    ... If I have multiple DIVs side by side using "float: ... a DIV that must grow and shrink when the window is resized. ... eiusmod tempor incididunt ut labore et dolore magna aliqua. ... quis nostrud exercitation ullamco laboris ...
    (alt.html)
  • Re: z-index query
    ... it's containing div, along with an allocation of z-index:100 to the ... Value Error: float center is not a float value: center ... added below my closing HTML tag, by the free hosting service. ...
    (alt.html)
  • Re: Fraction>>asFloat (FloatingPoint Overflow)
    ... /3)asFloat should raise an overflow, ... (i mean it likely won't be the closest float to the fraction) ... newN:= numerator. ... newD:= denominator. ...
    (comp.lang.smalltalk.dolphin)