CODEWITHSUNDEEP
css
bitWorking
bitWorking

Reputation: 12675

parent div is not expanding to height

I have a simple markup:

<div style="position: relative;">
    <img src="http://placehold.it/350x150" style="position: absolute;">
</div>
<img src="http://placehold.it/350x150">

jsFiddle

Why the heck is the parent div not expanding the height?

Edit:

The final markup is something like this:

<div style="position: relative;">
    <img src="http://placehold.it/350x150" style="position: absolute;">
    <img src="http://placehold.it/350x150" style="position: absolute; display: none;">
    <img src="http://placehold.it/350x150" style="position: absolute; display: none;">
</div>

I'm using jquery cycle. So position: absolute is necessary and added automatically by the plugin.

Upvotes: 0

Views: 963

Answers (2)

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

The real issue, it appears, is that your Cycle slideshow is collapsing because each slide (the image in your markup) has position: absolute set.

This is necessary because Cycle uses positioning (along with other CSS) to transition the slides. To solve this, look at either setting a fixed height on the container (only an option if your site is fixed-width). Cycle 2 has an auto-height option, which:

...determines whether or not Cycle2 will provide height management for the slideshow which can be very useful in fluid or responsive designs. There are three ways this option can be used:

  • an integer can be provided to identify the zero-based slide index for a sentinel slide
  • the string "calc" can be provided to instruct Cycle2 to calculate the tallest slide and use it as the sentinel
  • a ratio string can be provided which identifies the width:height aspect ratio for the container

By default, the slideshow's first slide is used as the sentinel slide and its demensions will control the height of the slideshow container if the container does not have a specific height set via CSS.

Some advice: use Cycle 2 (as opposed to the original Cycle plugin), it's got what you need built-in. Also check out the very good API documentation.

Upvotes: 1

kamil-mrzyglod
kamil-mrzyglod

Reputation: 5008

Because you have position: absolute; there. Change it to position: static; or similar. Why do you want to use absolute positioning there?

Upvotes: 5

Related Questions