Home/ Questions/Q 6700341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:48:09+00:00

I have a column of text, with wide margins on either side. Below it,

  • 0

I have a column of text, with wide margins on either side. Below it, I have a full-width section of data (in tabular format).

I can align these against each other quite readily. My problem is that there is a ‘tab’ that sits on top of the table section. It’s narrow enough that it doesn’t interfere with the center column of text, and the layout calls for it to slide up into the white space to the left of the text.

The easy solution would a position:absolute, with top:foopx to slide it up relative to the rest of the div. The only problem is, the tab’s height is dynamic. I need to somehow to top:’height’px, but (obviously) CSS doesn’t contain anything for dynamic values.

What I need to do is align the bottom edge of the ‘tab’ against the top edge of the containing div, and I cannot for the life of me figure out any CSS statement that does that. I’d rather avoid a javascript based approach (e. g. at runtime get the height of the tab, then set top equal to that height) because the entire bottom div is refreshed from time to time using an AJAX call, and adjusting the height in that process causes the page to ‘jitter’ on the update (not sure why it doesn’t happen without the height update; the jitter is in a separate section of the code).

Requested code example:

<html>
<head>
<style>
#smallColumn
{
    float:left;
    width:100px;
    height:100px;
    background:#000;
    margin:5px;
}
#fullColumn
{
    float:left;
    width:200px;
    height:300px;
    background:#000;
    margin:5px;
}   
#bottomDiv
{
    position:relative;
}
#tab
{
    position:absolute;
    top:-40px;
}
</style>
</head>

<body>
<div id="smallColumn">a</div>
<div id="fullColumn">b</div>
<div style="clear:both"></div>
<div id="bottomDiv">
    <div id="tab">Tab</div>
<hr />
DATA DATA DATA
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use top margins, the appropriate display properties and vertical-align:bottom. See the code below + comments for an explanation. You have to set a height and negative margin-top value which is larger than the actual height of the tab’s content. Otherwise, the content may jump back to the top.

    Relevant HTML/CSS:

    <div id="cont">
    <div id="tab">
        <div id="tab-fix">
            Tab
        </div>
    </div>
    Rest of content
</div>

#cont {
    margin-top: 30px; /*Reserve space*/
    height: 100px;
    background: lightgreen;
}
#tab {
    display: table; /* Necessary for the application */
    margin-top: -30px;/* Move tab to the top*/
}
#tab-fix {
    height: 30px; /* Expecting the height to not exceed 30px*/
    display: table-cell;
    vertical-align: bottom; /* Aligns the content at the bottom*/
}

    Fiddle: http://jsfiddle.net/stEW3/2/

    • 0