CODEWITHSUNDEEP
css
ptriek
ptriek

Reputation: 9286

Position:absolute within floated list of elements: unexpected behaviour

I was working on a jsfiddle in an attempt to provide an answer to this question, but ran into some unexpected behaviour.

As I have no idea how to explain/fix this behaviour, I was wondering if anyone else had an idea what's going on?

http://jsfiddle.net/hdX4w/

Upvotes: 1

Views: 236

Answers (2)

ScottS
ScottS

Reputation: 72281

Based off this experiment, the elements are being positioned to the top of the wrapper as expected, but they are moving "after" the floated elements, which are all positioning to the left as they should. In other words, the absolute is making them become "last" in the list because of the float left.

It seems to do the opposite with float: right as seen here.

Somehow, the float positioning (in the left scenario) is making the absolute element that is "out of flow" be pushed after the floats and this is pushing the elements "outside" your box when the width is 100px. Note how with less elements the absolute just falls in behind the floats, as seen here.

Upvotes: 1

Fred
Fred

Reputation: 232

I posed the original question you're referring to (and I think I'm going to have to use a table to solve it)... Anyway, I think the reason you're seeing unexpected behavior in your example is because I used img tags to create the boxes... If you add "display:block" to all the boxes (both the small and medium ones) in the CSS, it starts behaving as expected.

Upvotes: 0

Related Questions