CODEWITHSUNDEEP
htmlcssabsolute
gordie
gordie

Reputation: 1955

how to align vertically an absolute element with a variable height above its parent?

I have a CSS layout which is actually like this :

|---------------------|
|                     |
|                     |
|                     |
|------------|--------| 
|            |   ***  | < article header
|   main     |--------| 
|  content   |        |
|            |        | 
|------------|--------|

On the right, I have a sidebar with an article element. The article has a header with has an absolute position. The height of that header is variable and changes across my website. What I would like to achieve is to align the header vertically to have this :

|---------------------|
|                     |
|            |--------| 
|            |   ***  | < article header
|------------|--------| 
|            |        | 
|   main     |        | 
|  content   |        |
|            |        | 
|------------|--------|

Does anyone know how I can do that ? Thanks a lot !

Here's a fiddle : http://jsfiddle.net/UhT5F/

HTML :

<div id="content">
    <div id="inner-content">
        <div id="main"></div>
        <div id="sidebar">
            <article>
                <header>article header</header>
                <p>article content</p>
                <footer>article footer</footer>
            </article>
        </div>
    </div>
</div>

actual CSS :

#content {
    margin-top: 10em;
}
#inner-content{
    max-width: 1140px;
    width: 96%;
    margin: 0 auto;
}
#main{
    position: relative;
    float: left;
    border-top:1px solid blue;
    width:65%;
}
#sidebar{
    float:right;
    width:33%;
    background-color:#DDD;
    padding:1%;
}
#sidebar article{
    position:relative;
}
#sidebar article header{
    border-bottom:1px solid blue;
    position:absolute;
    top:0;
}

Thanks a lot !

Upvotes: 1

Views: 64

Answers (3)

Senthilmurugan
Senthilmurugan

Reputation: 383

Change the #sidebar as follows

#sidebar{
    float:left;
    width:33%;
    background-color:#DDD;
    padding:1%;
    margin-top:-25px;
}

http://jsfiddle.net/sentmca/UhT5F/3/

Upvotes: 0

Nishant Solanki
Nishant Solanki

Reputation: 2128

Please check this edited fiddle... with minus margin and absolute display..

http://jsfiddle.net/UhT5F/1/

Upvotes: -1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Instead of using top, try using bottom:100%. You can use margin-top to fine-tune this alignment, say by a few pixels.

Upvotes: 3

Related Questions