I have a div with some inline elements inside it. I want to put one of the elements on the left and the rest over on the right:
+---------------------------+
|+----+ +-----+ +-----+|
|| A | | B | | C ||
|+----+ | | | ||
| | | | ||
| | | | ||
| +-----+ +-----+|
+---------------------------+
I tried using float:right on BC and C but that removes them from the flow, making them stand out of the container:
+---------------------------+
|+----+ +-----+ +-----+|
|| A | | B | | C ||
|+----+ | | | ||
+------------| |-| |+
| | | |
+-----+ +-----+
What are the best alternatives for putting things over on the right without having them spill out of the outer container?
EDIT: Most answers seem to suggest either using overflow-auto or clear. What is the difference between them? How do I choose one over the other? Also, everyone seems to assume that I need to float the elements. Is float the only way to put things over on the right?
One simple solution is to add
overflow:autoto the container in order to solve this. This will cause the container to expand to contain its floats but will make scrollbars appear if for some reason someone additionally sets a small height for the container.There are also other alternatives that also work and might be better in other cases. See this question and its second answer for a good overview on the problem.