CODEWITHSUNDEEP
htmlcss
Jordan
Jordan

Reputation: 1619

CSS Table Styles - Get table row to fill entire content area

I'm trying to use the CSS table display to layout my page and I'm having trouble getting my main content area to take up the entire area (vertically) between the header and the footer. The main div contains some floated elements that don't necessarily extend the length of the screen. Basically, no matter what I do, the area of my main content is decided by the vertical height of these elements. Is there anything I can do about this? Thanks!

Html:

<div id="all-container">
    <div id="header">
  ...
    </div>
    <div id="table-container">
        <div id="content">
            <div id="side-bar">
               ...      
            </div>
            <div id="main">
               ... some content that's floated ...
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>

CSS:

#all-container {
    margin:0px;
    position:relative;
    min-height:100%;
    background-color:#E6DCD8;
}

#header {
    height:60px;
    padding-left:20px;
    padding-right:20px;
    background-color:#685642;
}

#table-container {
    display:table;
    height:100%;
}

#content {
    display:table-row;
    height:100%;
}

#side-bar {
    display:table-cell;
    vertical-align:top;
    padding-right:100px;
    height:100%;
    padding-bottom:60px;
}

#main {
    display:table-cell;
    vertical-align:top;
    border-left-style:solid;
    border-left-width:normal;
    border-left-color:#685642;
    padding-bottom:60px;
    height:100%;
}

#footer {
    position:absolute;
    width:100%;
    height:50px;
    bottom:0px;
    background-color:#685642;
}

Upvotes: 0

Views: 3131

Answers (1)

VKen
VKen

Reputation: 5004

I'm going to take a shot in the dark at trying to answer. These are my suggestions, not necessarily the canonical correct answer you're looking for. Not answering exactly to the question on table layout per say, but I'm offering other ways to achieve the same desired result.

This is your original code in the fiddle http://jsfiddle.net/CRzfS/

I think you have at least two design objectives here you want to achieve:

  1. make a full screen height layout
  2. make a 2-column layout

I'll have to put it forward first, that there are many ways to achieve the objective, but all has their limitations due to browser support. I also advise against table layouts unless it is necessary.

For me, display: table is only used for one reason mostly: Making vertical-align work in a fixed-height container, especially vertical-align: middle. There are also relevant uses for the auto calculation of table-cell widths from a fixed-width table, but it all depends on how you want to present data or information.

We'll face the issues one by one.

Full Height

First is the layout's height issue. Height flexibility has always been a sore point in web design layouts.

Here's an example fiddle with full screen height, not taking footer implementation into account: http://jsfiddle.net/CRzfS/3/

CSS:

html, body {
    height: 100%;
    min-height: 100%;
}

You can try it out here http://flexiejs.com/playground/

Your example implemented using CSS Flexbox: http://jsfiddle.net/CRzfS/4/

CSS:

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

#all-container {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    margin:0px;
    position:relative;
    min-height:100%;
    height: 100%;
    background-color:#E6DCD8;
}

#header {
    height:60px;
    padding-left:20px;
    padding-right:20px;
    background-color:#685642;
}

#table-container {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;

}

#content {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    overflow: hidden;
}

#side-bar {
    vertical-align:top;
    min-width: 150px;
}

#main {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    vertical-align:top;
    border-left-style:solid;
    border-left-width:normal;
    border-left-color:#685642;
}

#footer {
    width:100%;
    height:50px;
    background-color:#685642;
}

Two-column Layout

There are many ways to achieve this. Considerations have to be made for the differing screen sizes you're supporting(which is a major headache). Each has their own drawbacks. And also it depends on your width requirements i.e. fixed width, flexible width.

  1. semantic way by absolute positioning the sidebar and setting margin for main content
  2. common method used by layout frameworks via floating sidebar and container so they are side by side
  3. using display: inline-block to the same effect as #2.

The first method here, sets your #side-bar after the #main in the HTML. Then using CSS absolute positioning to set #side-bar to the left side, and setting margin-right for your #main. http://jsfiddle.net/CRzfS/2/

HTML:

<div id="table-container">
    <div id="content">
        <div id="main">
           ... some content that's floated ...
        </div>
        <div id="side-bar">
           ...      
        </div>
    </div>
</div>

CSS:

#table-container {
    position: relative;
}

#content {
    height: 200px;
}

#side-bar {
    width: 200px;
    position: absolute;
    left: 0; 
    top: 0;
    background-color: rgba(255,255,255,0.5);
    height: 100%;
}

#main {
    margin-left: 200px;
    height: 100%;
    overflow: hidden; // for floated elements within
}

The second method here, using the original HTML, you'll only need to set the CSS. http://jsfiddle.net/CRzfS/5/

#table-container {
    overflow: hidden;
}

#content {
   width: 100%;
}

#side-bar {
    width: 33%;
    float:left;
}

#main {
    width: 66%;
    float: left;
    vertical-align:top;
    border-left-style:solid;
    border-left-width:normal;
    border-left-color:#685642;
    padding-bottom:60px;
    min-height: 100px;    
    overflow: hidden; // for floated elemnts
}

How to combine these 2 layout requirements together will be difficult if I'm not sure of what you exactly require for the vertical height part. I'll need more information before I can give a relevant answer tailored to your question.

Resources

If you're open to layout grid systems framework, I'll suggest you take a look at: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

Even if you don't want to use it, just looking at the CSS implementation will yield you interesting insights.

I'll be adding other jsfiddle examples as more information on the question comes.

Edit: More information and explanations added.

Upvotes: 1

Related Questions