html - Making container of overlapping content fit height of largest child -



html - Making container of overlapping content fit height of largest child -

i'm building carousel/slideshow-type widget rotates between 3 quotes. let's markup looks this:

<div class="carousel"> <blockquote>...</blockquote> <blockquote>...</blockquote> <blockquote>...</blockquote> </div>

i want 3 quotes overlap in place, , i'll transition opacity property create fade in/out transitions. css looks this:

.carousel{ position: relative; } .carousel blockquote{ position: absolute; top: 0px; left: 0px; }

now if leave @ this, .carousel div default height of 0px, , not force rest of page's content down.

so need specify height, problem each quote can of different length, , result each blockquote can have different heights.

so question this: how can create sure .carousel div stretches fit blockquote biggest height?

i'd prefer pure-css solution, if doesn't exist, elegant js or jquery solution works me well.

here's own answer, using simple jquery loop find out blockquote tallest:

var tallest = 0; $('blockquote').each(function (i, e){ var h = $(e).height(); tallest = h > tallest ? h : tallest; }); $('.carousel').height(tallest);

html css

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -