• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

Height problem with floating DIV's

N

Nevermind

Gawd
Joined
Nov 7, 2000
Messages
571
Hi!

I'd like to create a page where there are three 'columns', but I can't get the floating DIV's to span the entire height of the page. The best I've been able to get is 100% of the browser window, but that ends the DIV's when scrolling down. Below is a short mockup of what I'm trying to do (which isn't working). I've tried just about every combination of height 100%/auto/inherit, clearing div's, etc. that I can think of.
Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head>
<title>Test</title>
<style type="text/css">

html, body
{
   height: 100%;
}
.container
{
    height: auto;
    background: #FF0000;
}
.left
{
    height: inherit;
    background: #00FF00;
    float: left;
    
}
.center
{
    height: auto; 
    background: #0000FF;
    width: 70%;  
}

.right
{
    height: 100%;
    background: #00FF00;
    float: right;    
}

</style>
</head>
<body>
    <div class="container">
        <div class="left">
            Left
        </div>
        <div class="right">
            Right
        </div>
        <div class="center">
            Middle
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            Middle  
        </div>
    </div>
</body>
</html>

EDIT: I forgot to say: setting everything to height 100% works in IE8, but not FF3.6.2
 
Thanks, that's nearly what I want, but I also need the columns to stretch to the bottom of the page if the content of all columns are shorter than the browser window, and I can't seem to get it right.
 
Depending on what your design looks like, you might be able to fake it by using a background image (repeat-y) on either the container div or the body of your site. All you need is a thin horizontal slice from a mockup in Fireworks or Photoshop or whatever.

Leave each column's background transparent and that may help you achieve your goal.


Edit: Sorry, my suggestion won't work if you want to use flexible-width columns! SoRnMaN's links should work though, you just need to have the exact html markup and CSS styles...
 
Last edited:
Actually, the design SoRnMaN linked won't expand to the bottom of the page (go to the page, copy the exact source, paste in a local html file and remove content from the columns so that each column is shorter than the page to see for yourself).

I added two position:absolute (left:0px and right: 0px) divs 100% height and negative z-index which repeats the leftmost and rightmost column backgrounds, and set the body background to that of the center columns. It looks ok in IE8, FF3.6.2 and Chrome 4.1, but I'm worried that it won't work in older IE versions (I don't have any IE6/7 installs at hand, and if I recall correctly, it's a bit complicated to run several IE versions on the same machine).
 
Nevermind said:
Actually, the design SoRnMaN linked won't expand to the bottom of the page (go to the page, copy the exact source, paste in a local html file and remove content from the columns so that each column is shorter than the page to see for yourself).

I added two position:absolute (left:0px and right: 0px) divs 100% height and negative z-index which repeats the leftmost and rightmost column backgrounds, and set the body background to that of the center columns. It looks ok in IE8, FF3.6.2 and Chrome 4.1, but I'm worried that it won't work in older IE versions (I don't have any IE6/7 installs at hand, and if I recall correctly, it's a bit complicated to run several IE versions on the same machine).
Click to expand...

For testing in ie5/6/7

IE 5/6
http://tredosoft.com/Multiple_IE

IE7
http://tredosoft.com/IE7_standalone
 
You're right... I hadn't noticed that. Looks like lots of people are looking for the same thing you are but no one has found it yet.

I don't normally like doing this, but maybe javascript could help? I don't have any other ideas at the moment but I'll let you know if I stumble into anything.
 
Thanks, that's really useful. Now I just have to dig up an old XP box to try it on (doesn't work on Vista/7), but I should have a couple laying around.
 
You must log in or register to reply here.
Back
Top