By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,607 Members | 1,944 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,607 IT Pros & Developers. It's quick & easy.

Beyond floats

P: 7
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??


Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  5. </style>
  6. </head>
  8. <body>
  10. <div style="width: 600px">
  12. <div id="float1" style="float: left; width: 250px; background-color: red;position: relative">a</div>
  13. <div id="float2" style="float: right; width: 400px; background-color: red;position: relative">a</div>
  14. <div id="float3" style="float: right; width: 120px; background-color: red;position: relative">a</div>
  16. <div style="width: 100px" ID="txt">ass dasd asdsadas dsasadsd sa ds</div>
  19. </div>
  21. </body>
  23. </html>
Nov 18 '08 #1
Share this Question
Share on Google+
4 Replies

Expert 100+
P: 397
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
Nov 18 '08 #2

P: 7

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. ( You could paste the code I've provided into the textbox and get a better idea
Nov 18 '08 #3

Expert 100+
P: 397
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
Nov 19 '08 #4

P: 7

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
Nov 20 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.