float:right questio

is there a way (without using javascript) to have a float:right that will stop floating and just become fixed after there is X amount of whitespace to the left of it?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You can control the whitespace by either the total width of the floating element, or setting the left margin to the amount of whitespace you want to have. Here's an example with left-margin:

<div style="width:75%;border:1px solid green;">
  <div style="float:right;width:200px;margin-left:200px;border:1px solid red;">Floating Div</div>
  <div style="clear:both;"></div>

What you want to do is float:left with margin-left:### where ### is the amount of whte space you want.

Cd&, the way I read it, he was looking for something semi-fluid that stops being "fluid" at a certain point. If you float left, you stay left.

Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Well it will stay left with the desired gap set by the margin to do what you just described requires managing the width of the container.  I guess we will have to see what wrynn is after.

wrynnAuthor Commented:
ya its a fluid design 100% width.  i want the floating div to essentially stop dead in its tracks whenever the user makes the window too wide (this will allow this div to be placed more towards the center in the full opened browser as opposed to the far right area)
I think the only way you can do that is by using a container with "max-width" (but that won't work in IE):
To work cross-browser it will need scripting because the container must have the width set conditionally:

<script type="text/javascript">
function setWidth()
   var maxwidth=784;
   var x,y;
if (self.innerWidth) // all except Explorer
      x = self.innerWidth;
else if (document.documentElement && document.documentElement.clientwidth)
      // Explorer 6 Strict Mode
      x = document.documentElement.clientWidth;
else if (document.body) // other Explorers
      x = document.body.clientWidth;

That will have to go in the head.  Before someone points out that set Expression could be used; let me point out that that is an IE only hack and would require setting the width two different ways which is a maintenance issue. This is ugly but it is 100% standards compliant and it is best practice to follow standards whenever it is possible to do so.

BTW, that code it partially cut and pasted from: http://www.quirksmode.org/index.html an indipensible source for resolving scripting isssues to support various doctypes/browser combinations.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
> The question stated "without using javascript"
So, the answer should be "It's possible, but not for IE".

> Before someone points out that set Expression could be used;
In addition to beeing non-standard, expressions technically use javascript (they might still work when javascript is disabled though... i have never tested that).
wrynnAuthor Commented:
the expression hack can actually send IE into an infinite loop in some cases, like when you specify a doctype (I've notice this myself a few times).  So I'd like to stay away from expressions.  thanks for the javascript hack but i was realy looking for a pure css solution
> i was realy looking for a pure css solution
The pure css solution is using a container with "max-width".  That's part of the CSS2 standard.
You often need to choose between "pure css solution" and "support for IE6".
Note that your page should still look fine in IE without the support for "max-width" (it will just look a little different).
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.