Only specify the size of the division on the right using CSS

I want to customize the scrollbar, but I found that I can only essentially reconstruct it using CSS and JavaScript; there is no quick and easy way to do this. Further, it seems that I need to stick to Mootools since I use it pretty extensively. Methods that use other frameworks do not seem to work (Some kind of conflict???). After I spent hours and hours, I found the following:

http://forum.mootools.net/viewtopic.php?pid=36191
http://www.tobypitman.com/mootools/ajaxscroll3

It uses the current Mootools release. But, but ... this doesn't allow me to change the height and width dynamically. This is what I need to figure out

Having provided the background information, I have the following question. Say that there is a division. There are two divisions inside that and they line up horizontally. I just want to set the width of the division on the right side. I never ever want to specify the size of the division on the left side. How can I do that?

BTW, the following is CSS that I need to modify:

@charset "UTF-8";
/* CSS Document */

/*-------------starts scroller------------*/
#scroller {
	height:296px;
	width:450px;
	position:absolute;
	top:50px;
	left:20px;
}

#scroller #content {
	float:left;
	height:296px;
	overflow:hidden;
	width:419px;
}

#scroller #content ol {
	margin-left:30px;
}

#scroller #content p {
	margin-left:10px;
	margin-right:10px;
	margin-top: 0px;
}

#scroller #scrollarea {
	cursor:pointer;
	float:left;
	height:296px;
	width:31px;
	background-image: url(../images/scrollback.jpg);
}

#scroller #scrollBarContainer {
	height:234px;
}

#scroller #scrollKnob {
	margin:1px;
	margin-left:4px;
	margin-bottom:2px;
	min-height:10px;
	width:23px;
}

#scroller #scrollForward {
	background-image:url(../images/scrolldown.jpg);
	height:31px;
	margin:0px;
	width:31px;
}
#scroller #scrollBack {
	background-image:url(../images/scrollup.jpg);
	height:31px;
	margin:0px;
	width:31px;
}

#ktop{
	height:12px;
	background-image:url(../images/knobTp.png);
}

#kmid{
	background-image: url(../images/knobBody.jpg);
	background-repeat:repeat-y;
	height:100%;
}

#scroller #scrollKnob #kbtm{
	height:12px;
	background-image:url(../images/knobBtm.png);

}


/*----------ends scroller------------*/
.red {color:#FF0000;}

body {
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	color: #000000;
}

http://www.tobypitman.com/mootools/css/scroll2.css

Code (markup):

BTW, I only provided the background information because it might be relevant.

 

<rant>
I personally f***ing HATE goofy custom scrollbars... I saw a site where in IE the colour was simply different and it didn't look too bad-- but then the 6 extra lines in the CSS just for one browser goes against my sensibilities. I find myself getting more and more allergic to Javascript. I keep thinking, yeah, I build web pages, I really should learn at least ONE programming language and that should be the one, and then I see what it's used for for (AutoTab.js makes me pull out my hair, I HATE filling out forms with that damn thing... thank the gods for NoScript).
</rant>

Eh, okay. You have a wrapper/container div of a certain width? Inside you have a right float (which MUST have a set width anyway cause it's a float) and afterwards can come a div which is static (no set width anyway) and the text and other inline stuff inside will wrap around the right float... however to be safe (in case you've got block stuff like for example an <h2> or something which will NOT wrap around the float), you should give this width-less div a right margin equal to or a hair bigger than the right float.

The thing is, it seems you want this second div to be widthless so you can put whatever stuff in there dynamically. You'd have to test the idea above to see how well that works-- if there's no set width on the container/wrapper div, then the width-less div will try to always fill the screen/browser window of the visitor and that may not be what you're aiming for. In which case you'd want something like min-width max-width (after thinking long and hard about what the smallest is you want your site, and what the largest is). IE6 loves to drop static content next to floats, and I get this even when I even friggin remove all the margin of the floated div (so it's not 3-pixrel jog or any of that stuff) so that may be your biggest problem.

If the page is flex-width, set width:100% for the wrapper/container, otherwise set whatever width you want, since this seems to help IE6 make a scrollbar instead of giving you float drop (must trigger Haslayout I'm guessing).

Did I get it right?