Member Avatar for 68thorby68

I have a simple 3 column display

#div_left {
    display:inline-block;
    width:25%;
    height:76%;
    float:left; 
    text-align:center;
}
#div_middle {
    display:inline-block;
    width:45%;
    height:76%;
    margin:0 2.5% 0 2.5%;
    float:left; 
    text-align:center;
}
#div_right {
    display:inline-block;
    width:25%;
    height:76%;
    float:left; 
    text-align:center;
}

I need to place my slideshow in middle column

#slideshow {    
    position:relative;
    width:100%;
    height:100%;
}

#slideshow > div {
    position:absolute;
    width:100%;
    height:100%;        
}

Because of the relative/absolute positions of #slideshow, #slideshow does not sit in the div #div_middle rendering #div_middle useless becuase it has not content and just collapses.

my html is:

<div id="div_middle">
    <div id="slideshow">
        <div>
            <img src="image_1.png" width="100%"/>
        </div>
        <div>
            <img src="image_2.png" width="100%"/>
        </div>
        <div>
            <img src="image_3.png" width="100%"/>
        </div>
    </div
</div>

I've tried everything I know to try and solve this....

Please can someone point me in the right direction?

Many thanks.

  • 3 Contributors
  • 3 Replies
  • 268 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by markwelbar

Dani AI

Generated

Quick diagnosis and context (references to earlier posts): the slideshow’s inner slides are absolutely positioned, so they are taken out of the normal flow and do not contribute to the middle column’s height. Setting the middle column to position: relative (as already did) only establishes the positioning context; it does not make the column tall. Percentage heights on the slideshow will also fail unless an ancestor has an explicit height.

Recommended approaches (pick one that fits the layout goals):

  • Give the slideshow an intrinsic height with CSS aspect-ratio so the parent keeps height while slides remain absolutely stacked:

    #slideshow {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}
#slideshow > .slide {
  position: absolute;
  inset: 0;
}

  • Use the classic padding-aspect-ratio sizer if aspect-ratio is not an option:

    #slideshow { position: relative; width: 100%; }
#slideshow::before { content: ""; display: block; padding-top: 56.25%; } /* 16:9 */
#slideshow > .slide { position: absolute; top:0; left:0; right:0; bottom:0; }

  • Or compute and set height with JavaScript when images load (keeps percentage-based height behavior without forcing ancestor heights):

    function sizeSlideshow() {
  var s = document.getElementById('slideshow');
  var img = s.querySelector('img');
  if (!img || !img.naturalWidth) return;
  s.style.height = (img.naturalHeight / img.naturalWidth * s.clientWidth) + 'px';
}
window.addEventListener('load', sizeSlideshow);
window.addEventListener('resize', sizeSlideshow);

Alternative route: avoid absolutely positioning the slides entirely — use a flow-based slider (translateX or opacity transitions) so the slideshow's height is driven by normal content and the middle column never collapses.

Troubleshooting notes and ties to earlier replies: ’s position: relative is correct as a positioning context, but it won’t create height by itself. Check markup validity (the posted HTML snippet appears to have an incomplete closing tag), ensure images are loaded before measuring, and remember that height:100% requires explicit ancestor heights. The resource linked covers box/position fundamentals and is worth reviewing if the containment behavior is still unclear.

Recommended Answers

All 3 Replies

Member Avatar for Alberto Bucur

Hi,
Try somthing like this:

html

<body>
        <div id="div_left"></div>
         <div id="div_right"></div>
        <div id="div_middle">
            <div id="slideshow">
                <div>
                    <img src="image_1.png" width="100%"/>
                </div>
                <div>
                    <img src="image_2.png" width="100%"/>
                </div>
                <div>
                    <img src="image_3.png" width="100%"/>
                </div>
            </div>
        </div>   
    </body>

css

  #div_left {

        width:25%;
        height:100%;
        float:left;
        text-align:center;
        background-color: lightblue;
    }
    #div_middle {
        position: relative;
        height:100%;
        margin-left: 25%;
        margin-right:  25%;
        text-align:center;
        background-color: yellowgreen;
    }
    #div_right {

        width:25%;
        height:100%;
        float: right;
        text-align:center;
        background-color: lightsalmon;
    }

    #slideshow {
        position:relative;
        width:100%;
        height:100%;
    }
    #slideshow div {
        width:100%;
        height:400px;
    }
Member Avatar for 68thorby68

Thank you very much, but unfortunately the slideshow div is still not nested in the middle div, rendering the middle div redundant. Because middle div is not populated, any html that follows just floods into the space left by the where the middle div should be.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.