I’m having difficulty with using float. Now I’m trying let some content float to the right side of the screen and I expect the non-floated content to be below it. However it turns out that the non-floated takes up the left side of the screen. Then I added top margin to the non-floated so that it will be pushed down but it’s strange that it doesn’t work. Here is my sample code in Fiddle.
What should I do now? Is there any way to solve this problem without having to use absolute position? I’m trying to avoid it because it causes problems when using different browsers.
Every suggestion is appreciated. Thank you.
Maybe I’ve misunderstood your problem, but in order to push non-floated content below floated ones you should set
CLEAR:BOTH;to the non-floated elements.