center element with unknown height without having it take up space

Question

This is a tricky problem from what I can see. Basically, I have alert messages that need appear on the page just below the navigation and on top of the content below. This is best shown in a fiddle here http://jsfiddle.net/53b6g/1/ - notice the commented style - this style can't be used b/c I don't know how many alerts will be on the page. So the height of the wrapper element is unknown.

HTML:

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
        <div class="tr">
            <div class="td">
                but wait - there could be 3 or 2 or 1 so can't use height calculations
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS:

/*can't use style*/
.wrapper{
    position: relative;
    top: -4px;
    margin-bottom: -70px;
}
/*end can't use style*/


.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}

Here is a fiddle without the commented code showing the problem at hand http://jsfiddle.net/8Awze/. Is this something that can be solved with CSS alone?

HTML:

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS:

.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}

Please don't try and sidestep the SO rule of posting your code in your question when linking to jsFiddle.net. — j08691, Nov 06 '13 at 16:18
Take a look at this.. [How to center text horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-text-horizontally-and-vertically) — Josh Crozier, Nov 06 '13 at 16:20

score 0 · Accepted Answer · answered Nov 06 '13 at 16:21

0

If I'm understanding you correctly, you should be able to use position: absolute as follows:

.wrapper{
    position: absolute;
    width: 100%;
    top: 25px;
}

http://jsfiddle.net/53b6g/2/

answered Nov 06 '13 at 16:21

James Montagne

77,516
14
110
130

This looks really good - I was using position absolute but was missing the 100% width. Will do further testing tonight :) – Mike Nov 06 '13 at 19:14
This works great - another gotchya for me was that bootstrap adds 100% width to .table elements. Thanks – Mike Nov 07 '13 at 00:37

center element with unknown height without having it take up space

1 Answers1