Hey there! I'm working on designing a website layout using CSS and divs that must meet the following criteria:
- The top and bottom elements should take up 100% width
- The top element should be a single "table-cell"
- The bottom element needs to be divided vertically into 2 "table-cell" sub-elements, all fitting neatly under the Top element with no gaps or overlapping
It seems like a simple task with table-styled divs, but I've been tinkering for hours trying to stop the bottom element from inheriting its width from the leftmost cell in the top element. Can anyone give me some guidance?
Here's a link to my jsfiddle
Just a heads up - the "STUFF" cell is causing issues by pushing the second column of the next row to the right, preventing the elements from aligning properly underneath the top row.
HTML:
<div id="dvStructure_Outer">
<div id="dvStructure_Upper">
<div id="dvUperrCell">
STUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFF<br />
</div>
</div>
<div id="dvStructure_Lower">
<div id="dvDetailStructure_Left">
Lower Left<br />
</div>
<div id="dvDetailStructure_Right">
<div class="dvDetailSection">
Lower Right Right Detail 1<br />
</div>
<div class="dvDetailSection">
Lower Right Right Detail 2<br />
</div>
<div class="dvDetailSection">
Lower Right Right Detail 3<br />
</div>
</div>
</div>
</div>
STYLE
#dvStructure_Outer {
display:table;
min-width:500px;
border-color:red;
border:solid;
}
#dvStructure_Upper {
display:table-row;
border:dashed;
}
#dvStructure_Lower {
display:table-row;
border:dashed;
}
#dvUperrCell {
vertical-align:center;
display:table-cell;
border:dashed;
}
#dvDetailStructure_Left {
display:table-cell;
border:dashed;
}
#dvDetailStructure_Right {
display:table-cell;
width:400px;
border:dashed;
}
.dvDetailSection {
display:table-row;
border:dotted;
}