In the process of creating a CSS design for a SIM game I enjoy playing, a client requested four boxes: two large ones with two smaller ones aligned horizontally in between. Everything was going smoothly until I attempted to add headers to the boxes. The entire website is constructed using an excessive amount of tables, reminiscent of coding from the 90s. All the boxes I created are divs and were positioned to coincide with the existing layout on the page.
The primary concern lies with getting the headers to display separately on all four boxes without any scrolling. Unfortunately, as illustrated in this fiddle, the alignment is off. Whenever I try adding headers to the horizontal boxes, the alignment becomes even more distorted. As a relatively new coder, I would greatly appreciate some assistance.
div {
display: block;
color: #fff;
}
.topcontain{
width:500px;
height:300px;
}
.topleftbox {
width:240px;
height:300px;
overflow:auto;
float:left;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
(remaining code stays the same)
To visualize how it currently appears on the web page under development: example
Your help is greatly appreciated!