After experimenting with various samples, I have managed to create a layout that works well in Chrome. However, I am facing compatibility issues with FireFox and IE.
My goal is to set up 3 side-by-side divs with a height of 100% and a width around 30%. These divs should display a scroll bar when their content exceeds the height.
Despite some margin problems related to floated divs, my main concern lies in the cross-browser compatibility issue. What could be causing my layout to not work consistently across different browsers?
On a secondary note, is there a more efficient way to evenly distribute the divs across the page without relying on spacer divs?
html,body{
height:100%;
margin:0;
padding:0;
}
.content{
display:table;
width:100%;
border-spacing:10px;
border-collapse:separate;
background:#A36;
height:100%;
}
.Col
{
float: left;
border-radius:5px;
background:#fff;
width:31%;
overflow: auto;
overflow-x:hidden;
height:100%;
}
.spacer
{
float: left;
border-radius:5px;
background:#ccc;
width:2%;
overflow: auto;
overflow-x:hidden;
height:100%;
}
.clearfix
{
display:block;
clear: both;
float:none;
}
HTML
<div class="content">
<div class="Col">search</div>
<div class="spacer"></div>
<div class="Col"></div>
<div class="spacer"></div>
<div class="Col">
Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
// More test content for scrolling...
</div>
<div class="clearfix"></div>
</div>