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
  • 255 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by markwelbar

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.