Needing help with tables!

[fertsuinen]

Hello!

I'm trying to create two tables side by side with text in them. The problem is that when I write in one of them, the other gets smaller if it has less text than the one I'm writing on. I want them to be exactly the same size all the time. Is there code or something for this? 

Right now I'm using this code: 
[div align="center"][table][tbody][tr][td style="padding:3px;"][div align="center"][div style="max-width:66%;background-color:#ff0008;background-image:url(https://cdn.pixabay.com/photo/2015/01/07/16/37/wood-591631_960_720.jpg);background-position:center;padding:15px 20px;font-size:20px;text-align:center;color:#fff;text-shadow:0px 0px 10px rgba(0,0,0,0.6), 0px 0px 5px rgba(0,0,0,0.8);"][font face="Bradley Hand ITC"]TITLE TEXT[/font][/div][div style="text-align:center;max-width:66%;height:250px;overflow-y:scroll;background-color:rgb(238, 238, 238);padding:20px;"][font color="#000000"] Insert text.[/font]
[/div][/div]
[/td][td style="padding:3px;"][div align="center"][div style="max-width:66%;background-color:#ff0008;background-image:url(https://cdn.pixabay.com/photo/2015/01/07/16/37/wood-591631_960_720.jpg);background-position:center;padding:15px 20px;font-size:20px;text-align:center;color:#fff;text-shadow:0px 0px 10px rgba(0,0,0,0.6), 0px 0px 5px rgba(0,0,0,0.8);"][font face="Bradley Hand ITC"]TITLE TEXT[/font][/div][div style="text-align:center;max-width:66%;height:250px;overflow-y:scroll;background-color:rgb(238, 238, 238);padding:20px;"][font color="#000000"]Insert text.[/font][/div][/div][/td][/tr][/tbody][/table]
[/div]

And here's an example what it looks like:


Is there a solution for this problem?
Thanks!

[Kami]

You have "max-width: 66%" in both of these, which is incorrect for your goals. "max-width" is the maximum width of the container. This means that it will not be 66% consistently; sometimes it will be smaller, depending on the content within, and will expand based on the content inside it until it reaches the upper bounds of 66% of its parent container. You should only use max-width if you're okay with the container being smaller than that or if you're setting an upper an lower bounds for something.

Additionally, you're putting divs inside tables. as a rule, tables are a fixed width system (which is why they've generally fallen in popularity in favour of more responsive divs) but you haven't declared any sizing for the table or the cells themselves. Because of this, they will adjust to the size of the content in each cell. So the more content one div contained in a cell has, the more room it takes up, again until you hit that 66% maximum threshold.

If you're set on using tables, then you first of all need to set a defined width for each cell (td). This way, that 66% will actually mean something, since the parent container is not fluctuating. Next, you need to change "max-width" to just "width" so it stays a consistent 66%  width of the table cell.