CODEWITHSUNDEEP
htmlcss
user1413544
user1413544

Reputation: 11

shrink-to-fit-div containing more elements?

The basic question is: How can a be shrink-to-fit over an element while itself containing other elements?

The goal is to have a (centered) menu over an (centered) image, which´s width and height shall relate to the images dimensions. All of it being responsive, meaning no absolute sizes!

Here´s the sample code:

<div id="menu">
    <img src="picture.jpg" />
    <div id="left">
        test1
    </div>
    <div id="right">
        test2
    </div>
</div>

#menu{
position:relative;
display: table; /*tried inline-block as well */
text-align: center;
line-height: 1;
}

#menu img{
height: 90%;
position:relative;
}

#left{
width: 46%;
background-color: #ffcdcc;
float: left;
text-align: right;
}

#clear{
clear: both;
}

#right{
width: 46%;
background-color: #324344;
float: right;
text-align: left;
}

and this is what it´s supposed to look like:

____________________________________
|                                  |
|  ------------------------------  |
|  |                            |  |
|  |     p i c t u r e          |  |
|  |                            |  |
|  |                            |  |
|  |                            |  |
|  |                            |  |
|  |    left <button> right     |  |
|  |                            |  |
|  ------------------------------  |
|                                  |
------------------------------------

The height/width ratio of the picture is always the same. It´s total size depends on the users window though.

I just can´t get the "menu" div to wrap around the and the "left" and "right" divs be positionable at the same time.

Is this even possible? I´m not even talking about browser compatibiliy yet...

Upvotes: 1

Views: 480

Answers (1)

Connor
Connor

Reputation: 1034

See if this works: http://jsfiddle.net/sdvnh/1/

Changes: 

#menu {
display: block;
}

#menu img{
height: 90%;
width: 90%;
}

Upvotes: 1

Related Questions