PDA

View Full Version : Float and Overflow?



iLLin
Apr 10th, 2007, 04:32 AM
Ok I have on my left side information that goes down say 50 lines. Width of 400px lets say. Then I float more information out to the right of that, only it goes lets say 400 lines. Well I know how to clear a float, but instead of clearing it, I would like it to overflow and scroll horizontally. Is that possible without know the height of the contents on the left?




------- -------
text -------
text -------
------- -------
-------
-------



Like my example? :p Well the left side "text" does not have a set height. Is there a way without javascript to do this, I will use javascript if I have to, just rather not.

Any suggestions?

koyama
Apr 10th, 2007, 05:23 AM
Well I know how to clear a float, but instead of clearing it, I would like it to overflow and scroll horizontally. Is that possible without know the height of the contents on the left?
I'm not sure what you mean? Where should the horizontal scrollbar be? Maybe you can elaborate a bit?

iLLin
Apr 10th, 2007, 05:26 AM
Sorry Im tired. When you clear a float, it goes all the way to the bottom of the floated text and starts the next part of the html.

I want it to chop the float even with the left side, and then add scroll bars for the remaining text with overflow. I can do it by specifying a height, but the left side can expand further and contract up with different user information.

EDIT: And I meant vertically.

koyama
Apr 10th, 2007, 05:50 AM
Hmmm... I cannot recall I have needed this kind of thing.

Well, this is what I can come up with at the moment. Still I'm not sure if this is what you are looking for. There might also be simpler ways of achieving the effect. IE7 still doesn't support percentage heights for children of auto height parents. So a dynamic expression was needed for IE.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<style type="text/css">
#main {
position: relative;
width: 800px;
background: green;
overflow: hidden; /* elegant clearing of float */
}
#left {
float: left;
width: 200px;
background: red;
}
#right {
position: absolute;
background: yellow;
left: 200px;
width: 600px;
height: 100%;
height: expression(this.parentElement.clientHeight); /* IE6, IE7 doesn't understand height: 100% for children of auto height parent elements */
overflow: auto; /* provide vertical scrollbar */
}
</style>
</head>
<body>
<div id="main">
<div id="left">
here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text
</div>
<div id="right">
here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of texthere goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text here goes unknown amout of text
</div>
</div>
</body>
</html>

iLLin
Apr 10th, 2007, 06:09 AM
Perfect :) Ty so much.