Beyond floats

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • somelongusername
    New Member
    • Jun 2008
    • 7
    #1

    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

    Code:
    <html>
<head>
<style type="text/css">

</style>
</head>

<body>

<div style="width: 600px">

<div id="float1" style="float: left; width: 250px; background-color: red;position: relative">a</div>
<div id="float2" style="float: right; width: 400px; background-color: red;position: relative">a</div>
<div id="float3" style="float: right; width: 120px; background-color: red;position: relative">a</div>

<div style="width: 100px" ID="txt">ass dasd asdsadas dsasadsd sa ds</div>


</div>

</body>

</html>
    Tags: None
    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397
      #2
      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

        Comment

        • somelongusername
          New Member
          • Jun 2008
          • 7
          #3
          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.c om/css/tryit.asp?filen ame=trycss_back ground). You could paste the code I've provided into the textbox and get a better idea

            Comment

            • David Laakso
              Recognized Expert Contributor
              • Aug 2008
              • 397
              #4
              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

                Comment

                • somelongusername
                  New Member
                  • Jun 2008
                  • 7
                  #5
                  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

                    Comment

                    Previous template Next
                    Working...