[Plone-UI] CSS fluid(ish) help

Adz07 adam at 7sycamore.co.uk
Mon Oct 22 14:15:06 UTC 2007


I am trying to creat a side bar that if i manage to get this issue sorted
will be animated using a javascript tween.

What i have is a main 'wrapper' DIV set to 200px wide. Inside this I want
two other DIVs. I have called them one and two for now.

The idea is that div 'one' is set to the same width as the wrapper (200px)
and what i need is for div 'two' to stay at the right side of 'one' no
matter how small the wrapper is.

At the moment div 'two' keeps droping below one?? Eventually what i need to
do is have div 'two' not showing if the wrapper is 200px and as the wrapper
div grows in width, div 'one' stays at 200px and div 'two' grows with the
rest of the space in the wrapper to the right of div 'one'..

Hopfully that makes sense.. 

Just to start with i need to get div 'two' staying on the right of div
'one'. In the code below div 'two' drops below.. how can i stop this baring
in mind that 'two' will need to grow when the wrapper goes more than 200px
wide during animation??

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>

<style type="text/css">
	.wrapper {
		overflow:hidden;
		width:200px;
		height: 200px;
		background-color:#1200ff;
	}
	.one {
		float:left;
		background-color: #ff0000;
		width: 200px;
	}
	.two {
		float:left;
		background-color: #fffc00;
	}
</style>
</head>
<body>

<div class="wrapper">
	<div class="one">One</div>
	<div class="two">Two</div>
</div>

</body>
</html>
-- 
View this message in context: http://www.nabble.com/CSS-fluid%28ish%29-help-tf4670536s6746.html#a13342279
Sent from the User Interface & Design mailing list archive at Nabble.com.





More information about the UI mailing list