Search code examples
htmlcssvertical-alignmentcss-tables

Cannot define the height or width of a DIv set to display:table-cell

I have a div wrapped in another div. The parent div is set to:

display:table

The child div is set to

div:table-cell

This is in order to vertically and horizontally centre some text. But I aslo need to define the size of that text. This is becasue the div needs to float in the centre of the browser window, and the window itself is on a long page too.

I have uploaded a screenshot to show you what i mean.

So, this is why i need to define the height and width of my table-cell div too. It needs to fit within that circle.

I'm at a loss as to why i cant set the height or width of this table-cell. I also need to do this in CSS, not jquery as it'll be the first thing that people see when the page loads, and there will be a lot of content on the landing page.

I've put the code here: http://jsfiddle.net/Kpr9k/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div as Table-Cell Width/Height Mystery</title>
<style type="text/css">

body, html {
width:100%;
height: 100%; 
background-color: gray;
margin: 0;
padding: 0;
}

#myTable {
margin: 0;
display: table;
width: 100%;
height: 100%;
border: 1px red solid;
}

#myCell {
display: table-cell;
max-height: 500px;
max-width: 500px;
min-height: 500px;
min-width: 500px;
height: 500px;
width: 500px;
text-align: center;
color: #000000;
line-height: 36px;
vertical-align: middle;
border: 1px yellow solid;
}

</style>
</head>

<body>
<div id="myTable">
    <div id="myCell">I cannot define the width of a table cell and its driving me insane! The yellow border is the table-cell, however its been defined to be (min, max AND regular!!) as a 500px square.Instead, it's just defaulting to be 100%.</div>
</div>
</body>

</html>

table-cell-quandry

Solution

  • Here is the answer:

    I'm surprised by how complicated this was, anyone have a better solution?

    http://jsfiddle.net/2Z2BF/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Browser Centred Div Overlay - WITH Specified Width and Height</title>
<style type="text/css">

html,body{
    height:100%;
    margin:0;
    padding:0;
}

#stopTheOverlayFromAffectingTheContent {
    position: absolute;
    width: 100%;
    height: 100%;
}

#verticalFix{
    height:50%;
    margin-top:-250px;
    width:100%;
}

#horizontalFix {
    width:500px;
    height:500px;
    margin-left:auto;
    margin-right:auto;
}

#myTable {
    background-color: aqua;
    display: table;
    width: 100%;
    height: 100%
}

#myCell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#contentBelow {
    height:3000px;
}

h1 {color:#fff;margin:0;padding:0}
</style>
</head>

<body>
    <div id="stopTheOverlayFromAffectingTheContent">
        <div id="verticalFix"></div> 
        <div id="horizontalFix"> 
            <div id="myTable">
                <div id="myCell">Lorem Ipsum</div>
            </div>
        </div>
    </div>
<div id="contentBelow">DEVIL</div>
</body>    
</html>