0

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
16
Views
3 Years
Discussion Span
Last Post by markwelbar
0

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;
    }
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.