CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12527

Floating a list to the right

This is my code: http://jsfiddle.net/gxLt5/11/

I thought by using a float:right with the class: right the account list item (test test) would sit on the far with of the purple bar, but instead it doesn't.

Can anyone explain what I have done wrong please?

Upvotes: 1

Views: 33

Answers (3)

potashin
potashin

Reputation: 44611

It is because ul's width is less than you've expected (it does not take the rest of the space). You can have a workaround with calc applied to the .navigation :

width: calc(100% - 100px);

P.S. : 100px is a hardcoded value, so it depends on the width of the a with the img.

JSFiddle

Another solution is to push link with img in the list and set it's width to 100%. Then set float:left to the fist n-1 li and float:right to the last.

JSFiddle

Upvotes: 2

MarioDS
MarioDS

Reputation: 13073

it does float right, that is to the right edge of your ul element. But since it's not the entire width of your purple bar, it does not appear to float right.

Upvotes: 1

James
James

Reputation: 4374

It's floating to the right of it's parent element which is navigation, which doesn't stretch the whole width of the purple bar.

Give navigation 100% width and work it out from there.

Upvotes: 1

Related Questions