CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 127

CSS table-cell size issues

I've created a CSS table layout with two rows - the first has a cell with an image in it and the second cell contains a title. Beneath this, content will appear but that's not the concern.

Whenever I try this I get massively oversized table-cells for the top table-row which I can't seem to resize. Any help would be appreciated.

Image of the problem

I've color-coded the table cells and the orange block is an image. The white space below that seems to have been created because the blue table-cell is so large.

<div class="table">
        <div class="tr-header">
            <div class="image-cell">
                <img src="orange.png"/>
            </div>
            <div class="title">
            <h1>title</h1>
            </div>
        </div>
        <div></div>
        <div class="tr-content">
            <div class="content">
                <!-- Lorem Ipsum -->            
            </div>
        </div>
</div>

And the CSS:

    *
    {
    margin:0px;
    padding:0px;
    }
    #table
    {
    display: table;
    }
    .tr-header
    {
    width:100%;
    display: table-row;
    height:185px;
    }
    img
    {
    width: 285px;
    height: 185px;
    }
    .image-cell
    {
    width:285px;
    height:185px;
    display: table-cell;
    }
    .title
    {
    display: table-cell;
    background-color:blue;
    width:100%;
    height:185px;
    }
    .tr-content
    {
    display: table-row;
    }
    .content
    {
    background-color:yellow;
    display: table-cell;
    width:100%;
    }

Apologies if the color-coding hasn't helped or my code's not easily readable or if I've just made a silly mistake, but I've searched around through W3's website and also previous stackoverflow questions.

Thanks in advance.

EDIT:

Adding vertical-align:top to .title has significantly reduced the problem, but I'm still left with this:

EDIT

Upvotes: 3

Views: 5995

Answers (1)

Josh
Josh

Reputation: 276

You need to always worry about vertical alignment with tables - even css styled ones it seems.

Just add a vertical-align property to the title class:

.title {
display: table-cell;
vertical-align: top;
background-color:blue;
width:100%;
height:185px;
}

Upvotes: 5

Related Questions