Creating a 3x3 grid with cells that have varying heights depending on content is proving to be challenging.
Except for the cells marked with red arrows, the rest of the grid has fixed height in pixels.
I attempted to build a 3x3 grid using divs to experiment:
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div>
</div>
#container {
width: 300px;
margin: 0px auto;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
}
However, adjusting the height of one cell causes others to misalign.
Any suggestions or solutions?