Question

I have a 9-box with a div structure like so:

<div class="NBWrapper">
    <div class="NBTopRow">
        <div class="NBLeft" />
        <div class="NBRight" />
        <div class="NBMiddle" />
    </div>
    <div class="NBMiddleRow">
        <div class="NBLeft">&nbsp</div>
        <div class="NBRight">&nbsp</div>
        <div class="NBMiddle">SharePoint WebPart goes here</div>
    </div>
    <div class="NBBottomRow">
        <div class="NBLeft" />
        <div class="NBRight" />
        <div class="NBMiddle" />
    </div>
</div>

And have the following CSS Rules:

.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}

Everything is in the right place and has the right attributes however, the NBLeft and NBRight elements of the middle row are not taking up any height. Using height:100% does not have any effect.

I have added &nbsp and still nothing.

I am usually good with this sort of stuff, but I am stumped. Does anyone have any advice?

Answer 1

What i ended up doing was restructuring the divs:

<div class="NBWrapper">
<div class="NBTopRow">
    <div class="NBLeft" />
    <div class="NBMiddle" />
    <div class="NBRight" />
</div>
<div class="NBMiddleRow">
    <div class="NBLeft">&nbsp</div>
    <div class="NBMiddle">SharePoint WebPart goes here</div>
    <div class="NBRight">&nbsp</div>
</div>
<div class="NBBottomRow">
    <div class="NBLeft" />
    <div class="NBMiddle" />
    <div class="NBRight" />
</div>
</div>

Taking away the floats and the margins in the attributes and adding this:

.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}

.NBLeft, .NBRight, .NBMiddle {
    display: table-cell;
}

You might ask, why not just use a table? SharePoint 2010 may use less of them, but but its still tables all the way down. I prefer using div structures.