Question

I’ve done a lot of research for CSS tables and creating a rowspan-like effect with CSS alone, and while I know it’s possible, nothing I’ve found so far demonstrates how to acheive what I’m looking for. I just want to know if my particular configuration is possible with CSS alone without using traditional tables, or if it requires Javascript to achieve (which I’m hoping to avoid).

I want two columns: the left column with one row which spans the entire height of the table and whose content is vertically centered, and the right column with two rows — the top row would be short and vertically aligned to the top, and the bottom row would be long and have content that is vertically aligned to the center. The left column/row will have a great deal of content, stretching the rightmost column and making the centering of the second row in the right column possible.

I should also like to note that I’m not one of those who is irrationally fearful of using traditional tables, even though that’s what it may seem. My project calls for CSS tables for other reasons unfortunately.

Below is a link to an example using tables demonstrate what I’m looking to achieve, and the flawed CSS tables I’ve come up with so far. The key aspect is the vertical aligning of the two rows on the right column — currently the title is aligned to the top through Javascript, but I would like to know if there is a way to do it with CSS tables (and without using absolute positioning, as I want the height of the title to affect the row below it). The height of the content on the bottom row in the right column will be variable and undetermined.

The goal:

http://jsfiddle.net/VCGAK/4/

This is all I have come up with:

http://jsfiddle.net/5mvrg/

CSS:

#thetable {
    display:table;
    width:100%;
}
#tablerow {
    display:table-row;
}
#main-content {
    border:1px solid #000;
    width: 40%;
    left:0;
    position:relative;
    display: table-cell;
    vertical-align:middle;
    padding-right:25px;
    z-index:1000;
    text-align:center;
}
#titlediv {
    border:1px solid #000;
}
#main-sidebar {
    border:1px solid #000;
    width: 60%;
    vertical-align:middle;
    display: table-cell;
    height: 100%;
    position:relative;
    padding-right: 15px;
    margin:0px auto;
    z-index:1000;
}

HTML:

<div id="thetable">
    <div id="tablerow">
        <div id="main-content" <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
        </div>
        <div id="main-sidebar">
            <div id="titlediv">Title is currently aligned to top via Javascript</div>Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>
        </div>
    </div>

While this answer was helpful to demonstrate how rowspans can be achieved, I couldn’t tailor it to make this type of vertical aligning work. Any help would be greatly appreciated.

Answer 1

Ok, understood now:

HTML CODE:

<div id="thetable">
    <div id="tablerow">
        <div id="main-content" <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
        </div>
        <div id="main-sidebar">
            <div id="titlediv">Title is currently aligned to top via Javascript</div>
            <div id="contentdiv">
            Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>
            </div>
        </div>
    </div>

CSS CODE:

body, td, th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
}
body {
    background-color:#652739;
    color:#CCC;
}
#thetable {
    width:90%;
    max-width:1180px;
    min-width:750px;
    position:relative;
    margin:0px auto;
}
#thetable, #thetable tr td {
    border:1px solid #000;
}
#leftcell {
    width:40%;
    text-align:center;
}
#titlecell {
    padding-left:50px;
    width:60%;
    vertical-align:top;
    height:200px;
}
#detailscell {
    padding-left:80px;
    width:60%;
    padding-right:15px;
    vertical-align:middle;
    height:300px;
}

I update ur jsfiddle too…

Hope that help.