Forum Moderators: not2easy
Right now this is what I have ...
DIV1 is the content..
DIV2 is the sidebar floating:right; in DIV1.
(Webmasterworld forums won't parse spaces so I had to use underscores... *sighs*)
----------
¦1____¦2¦
¦_____¦ ¦
¦_____¦ ¦
¦_____
¦_____
¦_____
¦_____
----------
Here is what I want...
----------
¦1____¦2¦
¦_____¦ ¦
¦_____¦ ¦
¦_____¦ ¦
¦_____¦ ¦
¦_____¦ ¦
¦_____¦ ¦
----------
Now I've looked up some sort of faux tutorial but honestly it just didn't work...
After searching endlessly (2 hours or so) the one or two examples I saw contained much more info then I needed and didn't get straight to the point. That seems to be a big prob on the net *rolls his eyes* ...
Anyway my side divs on my site right now have rollover effects... I use the current setup...
div.inset
div.inset-hover
If I have to use a BG image I would prefer to use a 1x1 pixel transparent image and set the BG colors inside the DIV and not as two seperate images. The rollover effect looks like so...
<div class="inset" onmouseover="this.className='inset-hover'" onmouseout="this.className='inset'">
I think thats it...
Have a look at this (copy it and check it in a browser). This might be useful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
body {color:white; font-weight:bold;}
#leftcolumn {width:300px; background: red;}
#rightcolumn {width:300px; background: blue; float:right}
</style>
<script type="text/javascript">
function fixH()
{
var lh=document.getElementById('leftcolumn').offsetHeight;
var rh=document.getElementById('rightcolumn').offsetHeight;
document.getElementById('rightcolumn').style.height=(lh>rh)? lh+"px" : rh+"px";
document.getElementById('leftcolumn').style.height=(rh>lh)? rh+"px" : lh+"px";
}
</script>
</head>
<body onload="fixH()">
<div id="rightcolumn">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>This div has 12 paragraphs</p>
</div>
<div id="leftcolumn">
<p>1</p>
<p>2</p>
<p>3</p>
<p>This div has 4 paragraphs but it's as long as the other one because of some javascript which makes the shorter div the same length as the longer one.</p>
</div>
</body>
</html>
I hope it helps.
You say this works for you but then you say that you used javascript to do this somewhere else and it wasn't good.... (?) Are you saying this is good or not?
There are other ways to do this - one being the faux columns that Mr Jab said didn't work for him. I don't know why they didn't work for him, but he said they didn't, so here's another option.
Recently I sought out the same inforamtion (and w/out javascript). You might be able to find out more than I did. What I did find out is that minimum height helps with some browsers, but not others.
The other problem is that when you do get the columns to drop all the way to the bottom and the page has content in the center that exceeds the viewport the side columns will fall short of what you expect.
If you do find a way to make it work please post it.
With the right column floated you really only have two script-free options to create two solid-looking columns. The first is the Faux Columns technique. I've used this trick easily a dozen times with plenty of success. If you have questions on how to get it functional, I'd be happy to help. The only other way to ensure two columns with one floated (there are other 2 column techniques, but not when one of them is floated) is to make sure that the floated column is ALWAYS LONGER.
Sorry to say it, but there are no other choices. (If someone knows of one, lay it on me; it'll be news to me). Either Faux Columns or GUARANTEED higher height on the float.
You could probably slap a whole bunch of height/min-height hacking on the float div in order to force it's height open, but that min-height stuff is a viper pit, some browsers have NO workaround for it, and, of course, you're really limiting your freedom by requiring the float be the taller column. (Of course, if you know the content side will always be taller, you could float that one instead...)
In my case, I want to find a way to fill several DIVs into a window, it is a chat window, it is easy to imagine, right? it has a header, a footer(for typing), a content area and a user list on the right. I need header always attache the top, footer always attach to the bottom, and user list to the right, the content use all other space.
so ,I tried
1, js function, I did try to use onresize in another project which it includes a lot of HTC, but in the chatroom case, the code is a embed one, so I don't have body tag, I can use attachevent to hook up onresize under NS, I forget how to do that under IE, anyone reminder me? and the calculation has to be different under IE and NS.
2, use css expression, very neat one under IE, I can put something like height:expression(chatarea.offsetHeight - 80); to the conent's height, but one problem I havn;t solved, it is that when the expression set the height of the content area, the chatarea will resize, and it causes the expression run again, so it ends up as a dead loop, I can put an exact value there, some value like 82, while not 80, that will make it fit well with expand the outter div, but I am just not sure, it seems to me, some situation might easily cause it to a dead loop, so I can not use this way.
3 table in div, we all know that 100% height on child div means the same height as parent div, in my chatroom case, usually, people will think if I give header 10%, conent 80% and footer 10% will work, but my header and footer are in fixed size, it seems one of the reason causes all the problem is that you can not make a div use all the free space, and you can not set a percentage since the free space can not measured by percentage. table seems have no this problem.
any comment?
