Beyond floats

Hi all,

I've been playing around with CSS floats, trying to understand how they work and I've come across a situation that doesnt make sense.

From my understanding, any non-float elements should flow right past. In the code below, #float1 is displayed on line 1 and #float2, #float3 are on the next.

After adding #txt I should expect it to be displayed next to #float1 but it's displayed on line 2. If #txt's width is not specified then it's displayed on line 1. This doesnt make sense, because line 1 has enough free space to fit #txt. Am I missing something??

Thanks

re: Beyond floats

Half the battle for me on forums and lists is trying to understand what the poster is attempting to do, and what the question is?

Where would like the text block that is 100px wide to be. It could be adjacent to the the first float left. It could not be adjacent to the two float right divisions as the sum of the widths of the text block and the two float right divisions is greater than the width of the parent container. And so on, and either way, whatever you are trying to do is not doable in any version of Internet Explorer without a doctype.

CSS2.1 Specs :: Floats

re: Beyond floats

Dave,

Sorry if i wasn't clear, but all im looking for is some explaining on how float operate.

In my example, we have a give with with 600px then

1. #float1 is added and as expected it floats to the left
2. #float2 is added and since there isnt any place of the same line it's placed (floated) to line 2 (as expected).
3. #float3 is added and floats to the left of #float2 (as expected)
4. But, when I add #txt with width: 100px I expect it to be placed on line1 next to #float1 but it's placed on line2 to the left of #float2

So my question is, "Should #txt be placed to the right of #floa1, or have I gone wrong somewhere?". I'm not trying to achieve anything here. My goal is to understand and learn css!

I used the w3school's sandbox to play and learns. (http://www.w3schools.com/css/tryit.asp?filename=trycss_background). You could paste the code I've provided into the textbox and get a better idea

re: Beyond floats

Thanks, I think I'll pass on your suggestion of what I should do.

Your stuff [1] is doing exactly what you told it to do [2].


[1] stuff
[2]The Visual Formatting Model :: Floats

re: Beyond floats

David,

Thanks a lot for the links, they really helped. I really wish I had a few more ounces of brain cells to google "css floats". The conflict of judgment between your posts make be believe you're definitely past the pre-andropausic stage. I guess it's no surprise you've reached 298 posts.

Good riddance