I am struggling with a mysterious white space appearing horizontally inside a div. I have no idea why it is there, and it just doesn't seem to add up.
Check out the Fiddle
The design calls for two columns: one on the right and one on the left which is larger. The issue arises in the left column where the content appears lower as if there is a 5px padding-top, even though there is no padding applied. This white space resides within the left table-cell div, causing the text to appear lower compared to the contents in the right div.
The HTML code looks like this:
<div id="main_contents_cage">
<div id="main_contents_left">
<table> ... some content ... </table>
</div>
<div id="main_contents_right">
... some other content ...
</div>
</div>
The CSS styles are defined as follows:
#main_contents_cage { display: table; }
#main_contents_left, #main_contents_right { display: table-cell; }
#main_contents_left { width: 742px; }
#main_contents_right { width: 246px; border-left: 1px solid #C6C6C6; }
I have scoured the internet and StackOverflow for similar issues but couldn't find an exact match.
I have experimented with adding border-collapse/border-spacing to different elements, but it did not resolve the problem.
Changing the content of the table-cell divs did not yield any different results either. If anyone has encountered a similar issue or has any ideas on how to fix this, please share!