I've been struggling to clear the content below my three div columns, each consisting of a span with centered text and a textarea. It seems that the issue arises from the floating div tags without proper clearing.
When viewed in Firefox, the next element after the columns (in this case, a button) overlaps the first column. Surprisingly, my local file displays correctly in Internet Explorer, possibly due to IE automatically adding its own clearing enclosure. However, in my jsFiddle code viewed in IE, the textareas do not maintain their 100% height. Could this be because jsFiddle doesn't render HTML in IE's Quirks Mode?
I've scoured through resources such as the Holy Grail article, the w3schools guide, the clear:after fix tutorial, and other articles like the one on div column layout. However, I haven't been able to find a solution that works seamlessly in both browsers.
Check out my jsFiddle code and the code snippet above. It might look messy due to multiple methods I tried.
site.html
<html>
<head>
<link type="text/css" rel="stylesheet" href="site.css" />
</head>
<body>
<div id="top" class="clearfix">
<div class="column">
<span>blah1</span>
<textarea class="text"></textarea>
</div>
<div class="column">
<span>blah2</span>
<textarea class="text"></textarea>
</div>
<div class="column clearfix">
<span>blah3</span>
<textarea class="text"></textarea>
</div>
<div class="clearing"> </div>
</div>
<div id="center">
<span>blah blah blah</span>
<input type="button" value="Button" />
</div>
</body>
</html>
site.css
body, html {
height: 100%;
width: 100%;
}
body {
padding: 0;
border: 0;
margin: 0;
}
#top {
height: 40%;
display: block;
width: 100%;
float: left;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.column {
width: 33%;
float: left;
height: 100%;
text-align: center;
}
.clearing {
height: 0;
clear: both;
}
.text {
width: 100%;
height: 100%;
}
#center {
clear: both;
}
I've experimented with adding overflow: hidden (and auto), which does resolve the issue, but I prefer to display the entire textarea without hiding or scrolling it. Any suggestions or insights would be greatly appreciated.