*FYI: I do not have Internet connection at my desk. I have a tablet I am using which is not optimal to type. I am using a terminal not near my desk right now
I am floating the right [float: left;] and on hover increase the width [rightSide:hover85%]. I set the transitions on the right side too.
The styles for the left are fighting with the right. I can make it work for the right if I remove the left transitions and float. Should I also have them both on different z-indexes too?
If you want the expanding div on the right just move it around like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.textbox {
padding:5px;
border:1px solid #999;
background:#fff;
margin:0;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
width:20%;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-ms-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
position:relative;
z-index:2;
float:right;
background:yellow;
}
.textbox:hover { width:80% }
.test {
margin:0 0 0 10px;
overflow:hidden;
background:red;
color:#fff;
text-align:center;
padding:10px;
}
</style>
</head>
<body>
<p class="textbox">This is a longline of text that would normally stretch outside the confines of the container</p>
<div class="test">Normal content</div>
</body>
</html>
z-index has nothing to do with the effect as they are not overlapping.
The static element should not be floated and uses overflow:hidden to create a rectangular block to the side of a float that will fill the remaining space whatever it is (ie6 and 7 would need zoom:1.0 to create the same effect as the overflow:hidden does).
Sorry to confuse. I am trying to see what I am saying and doing incorrectly. If I do not get it today I will try to copy my code and post it tonight. BUT TO CLAIFY… the effect you made initially is nice and it behaves correctly. I am asking if the right side could also push the left on hover the exact same way. So ultimately you have both left and right sides behaving the same way as you made the left side.
I’m not sure what practical use it will be but I think you are after something like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box1,.box2{
width:50%;
background:red;
float:left;
margin:0 -1px 0 0;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-ms-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
min-height:200px;
}
.box2{
float:right;
margin:0 0 0 -1px;
background:blue;
}
.wrap:hover div{ width:20% }
.wrap .box1:hover{width:80%}
.wrap .box2:hover{width:80%}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">Box1 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </div>
<div class="box2">Box2 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </div>
</div>
</body>
</html>
That seems to be much the same as my example (apart from a couple of things) but I do like your use of :not Nice example.
The only drawback of using :not is it will mean that you have no fallback for older browsers as my example will still be functional back to IE7 but I guess that wasn’t the question.
@PaulO: Thank you. It works properly. I know it may not seem useful but it is actually building on other things. @Spritanuim: Thanks, yes that is nice.
