CSS - clear: right not working as I would expect.

jdana
jdana used Ask the Experts™
on
Take a look at the following page:

http://jaginc.com/dev/indexClearSample.html

Three DIVs are set with float: left - #leftSidebar, #main, and #rightSidebar.  #main is also set with clear: right.  So why is #rightSidebar still on the right?  Shouldn't it drop below?
Clear-Right.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010
Commented:
Try to put clear: left on rightSidebar.

Author

Commented:
That did the trick.  I'm trying to get a better handle on the CLEAR property.  The fact that #rightSidebar {clear: left;} works makes sense, but I still don't understand why #main {clear: right;} doesn't work.   Can someone explain?
Can you please paste your code, it will be quite easy for us to see where is the problem in your code.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2010
Commented:
You put float: left to all divs. There is no use to put clear: right since its not floating right. You're trying to clear something that You didnt set.

Author

Commented:
R-Byter,

Makes good sense.  Thanks.

j
what's confusing with this is does clear: right mean it clears everything to the right or does it mean that it clears everything that is float: right?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial