CSS Float and Width

Question

I'm wondering why adding a "width" element to a box is destroying the effect of "float".

For example, when I have

.login form { 
    float: right;
    background-color: green;
 }

All elements shifts to the right and the background color only encircles the elements that are there (it does not create a green bar at the top of the screen as I want). I figured I could ameliorate this problem by setting a width,

… width: 800px; …..

but although I get a green by striping the top of the screen, all of my box elements seem to float to the left, so I have a green bar with login elements at the left and not the right.

Could someone please tell me how to take my .login box element, justify all of the five attributes that it has to the right (textfields, boxes, and a button), and still have a green bar at the top of the screen even where there is just blank space.

Answer 1

You can even put to the container: overflow:auto ; or you can you the clearfix method found here .

Answer 2

trying it with padding-left:(something px) ; instead of width: 800px; will probably fix this problem

What is likely causing this problem is that you're using the full capacity of the overlaying div, this makes it useless to float-right since there is nothing left to float away from