I cannot figure out how to clear the content below my 3 div columns–where each div column contains a span with some centered text and a textarea below the span. The problem, or at least I think, is that the div tags are being floated, and I’m not properly clearing them.
What happens is Firefox floats my next element after the columns (in my case, a button) over the first column. My local file renders perfectly in Internet Explorer (but I’m assuming that’s because IE adds its own enclosing for clearing… can’t find where I read that). However, when I look at my jsFiddle code in IE, the textareas do not maintain their 100% height. I’m assuming jsFiddle doesn’t render HTML in IE’s Quirks Mode (which is why it differs from my local file).
I’ve looked at the Holy Grail article, the w3schools article, the clear:after fix article, and several other articles (div column layout), but couldn’t come up with a working solution in both browsers.
Here is my jsFiddle code, and here is my code. As you can see, my code has multiple methods, so I’m sorry for the mess.
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;
}
It’s also good to note that I’ve tried adding in overflow: hidden (and auto), which does solve the problem, but I want to see my entire textarea… not hide it/have it scroll. Any suggestions or ideas would be appreciated.
Take:
Out of your #top deceleration in your CSS. That’s causing the issue. If you want to make the textboxes larger simply use:
Hope this helps.