I have 2 columns that are achieved by floating. They do not stretch to 100% when using css. How do I achieve this?
+1
A:
I did some research on this and there is no way to do in it css intuitively. There are ways such as tricking the aesthetics by using an image behind the short column to repeat downwards.
Other way is using javascript, If i find those posts, i'll update this.
http://www.thechoppr.com/blog/2009/02/09/2-column-fluid-layout-100-height-with-leftright-sidebar/
Shawn Mclean
2010-01-04 21:52:54
A:
#columns {
height:100%;
}
The problem with css and height is that it is not consistent across browsers. You would be better off not worrying about height. You also have the issue of different screen resolutions.
If height is really important I would tackle it with JavaScript.
Khalid Abuhakmeh
2010-01-04 21:53:58
+1
A:
try setting the min-height on that columns and all all of their containing elements (including body and html) to 100%. see here
EDIT: I've heard that this won't work in ie8, but I've tested it and it looked ok,
CrazyJugglerDrummer
2010-01-04 21:54:26
+1
A:
This should do the trick:
<script langauge="Javascript" src="http://i.ngen-io.us/core/js/b4dom.js"></script>
<script langauge="Javascript">
var currHeight = document.body.clientHeight;
document.getElementById("MyColumnDiv").style.height = ''.currHeight.'px';
</script>
You can also set the width using this example. Feel free to reuse my library, but please note its source in your code.
drlouie - louierd
2010-01-04 21:55:15
I like this. I'm gonna use it too +1.
Shawn Mclean
2010-01-04 22:04:43
This isn't consistent across all browsers. See this SO answer (http://stackoverflow.com/questions/833699/clientheight-clientwidth-returning-different-values-on-different-browsers)
fudgey
2010-01-04 22:16:43
It is consistent if you use my library, otherwise no, it will not be consistent.
drlouie - louierd
2010-01-04 22:17:53
drlouie - louierd
2010-01-14 19:32:12
A:
To achieve 100% height using CSS you must make sure the enclosing block is also set to height: 100%; including the <html> element.
html, body
{
height: 100%;
}
#YourBlock
{
height: 100%;
}
Gary Willoughby
2010-01-04 22:32:15
A:
Hi Shawn,
Try this css & html, tested and works in FFx 3.5, IE 8 & Safari 4 - works partially in IE7 by applying a background color to #container.
<style type="text/css" media="screen">
#container { width:800px; margin:25px auto; position:relative;display:block;overflow: hidden;}
#header { height: 80px;background: #eee; }
#wrapper { float:left;width:100%}
#col2 { margin:0 200px;background: #ddd; }
#col1 { float:left; width:200px; margin-left:-800px; background: #eee; }
#col3 { float:left; width:200px; margin-left:-200px; background: #ccc; }
#col1, #col2, #col3 { padding-bottom:32767px!important; margin-bottom:-32767px!important; }
#footer { clear:both; background: #aaa; padding:10px;height: 20px;}
* > #footer { position:relative; z-index:20; }
</style>
Using this HTML Structure
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="col2"></div>
</div>
<div id="col1"></div>
<div id="col3"></div>
<div id="footer"></div>
</div>
Regards Said