[Plone-UI] CSS fluid(ish) help

Max Starkenburg maxwell at owlnet.rice.edu
Mon Oct 22 15:28:55 UTC 2007


Would using more explicit positioning work in your case?  Try adding the
following CSS to the declarations you already have:

.wrapper{
  position: relative;
}

.one{
  position: absolute;
}
.two{
  position: absolute;
  left: 200px;
}

Does that work?  (If so, you should also be able to get rid of the "float:
left"s.)  If you want to maintain a background color on div two that stays
to the right edge of the wrapper div, I think you'll have to use whatever
javascript you're using to set the wrapper div's width to set div two's
width to W - 200.

Hope this helps (and makes sense),

Max

On Mon, 22 Oct 2007, Adz07 wrote:

>
> 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.
>
>
> _______________________________________________
> UI mailing list
> UI at lists.plone.org
> http://lists.plone.org/mailman/listinfo/ui
>
>




More information about the UI mailing list