Search code examples
htmlcssheightpositioning

height of absolute div inside relative div

i have an absolute div inside a relative div and i want to make it of a fixed dimension. my problem is that the height is ignored.

this is my html structure:

<div id="wrap">
    <div>
        <h1>test</h1>
    </div>
    <div id="swipe">
        <br/>
    </div>
</div>

and this is my css:

body {
    background-color: #7ECEFD;

    margin: 0;
    padding: 0;
}

#wrap {
    width: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
}

#swipe {
    background-color: white;    
    position: absolute;
    top:0;
    left:10px;
    width:100%;
    height: 500px; 
}

why? how can i resolve it with css? any other trick (jquery)?

http://jsfiddle.net/nkint/XQzJf/

Solution

  • It is 500px high, but most of it is hidden due to the overflow: hidden on #wrap. You need to either remove that or make it big enough to contain #swipe.