float Problem (vertical position in parent div)

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Gert Brinkmann
    #1

    float Problem (vertical position in parent div)


    Hello,

    very often when using the float-property I do have problems with positioning
    the element in its parent container. And/Or the parent container behaves
    confusingly regarding its height.

    An example:

    <html>
    <head>
    <style type="text/css">
    div#content {
    border:1px red solid;
    padding-top: 10px;
    }

    a {
    padding: 8px;
    }

    a#first {
    float:right;
    }

    a#second {
    /* float:left; */
    }
    </style>
    </head>
    <body>

    <div id="content">
    <a id="first" href="foo1">Fir st</a>
    <a id="second" href="foo2">Sec ond</a>
    </div>

    </body>
    </html>

    Questions:

    In this example the first (floating) link is no more positioned completely
    inside the content-div. Why does this happen?

    When setting float:left for the second link the content-div collapses to
    just a few pixels of height. The links are then placed below the
    content-div. Why does this happen? I had expected that the div still
    encloses the links.

    I feel like missing a very fundamental conception of the float-property.
    Where could I read about more details about this? Does anybody know a good
    online-ressource (or maybe a offline book) about this?

    Thank you,

    Gert

    Tags: None
    • David Dorward
      #2
      Re: float Problem (vertical position in parent div)

      Gert Brinkmann wrote:
      [color=blue]
      > In this example the first (floating) link is no more positioned completely
      > inside the content-div. Why does this happen?[/color]

      Containing Floats (Complex Spiral Consulting)
      http://www.complexspiral.com/publications/containing-floats/


      --
      David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
      Home is where the ~/.bashrc is

        Comment

        • Gert Brinkmann
          #3
          Re: float Problem (vertical position in parent div)

          David Dorward wrote:
          [color=blue]
          > Gert Brinkmann wrote:
          >[color=green]
          >> In this example the first (floating) link is no more positioned
          >> completely inside the content-div. Why does this happen?[/color]
          >
          > http://www.complexspiral.com/publica...aining-floats/[/color]

          Thank you very much. This indeed gives a good understanding for floating
          layout.

          But there is still one question left: In my html-example with only the first
          link set to float (right), the top-padding of the content-div is respected
          by the first link but not by the second link. It can be better shown with
          an additional border around the links: (btw: I am testing with firefox)

          <html>
          <head>
          <style type="text/css">
          div#content {
          border:1px red solid;
          padding-top: 10px;
          }

          a {
          padding: 8px;
          border: 1px solid black;
          }

          a#first {
          float:right;
          }

          a#second {
          /* float:left; */
          }
          </style>
          </head>
          <body>

          <div id="content">
          <a id="first" href="foo1">Fir st</a>
          <a id="second" href="foo2">Sec ond</a>
          </div>

          </body>
          </html>

          --


            Comment

            • Gus Richter
              #4
              Re: float Problem (vertical position in parent div)

              Gert Brinkmann wrote:[color=blue]
              >
              > In this example the first (floating) link is no more positioned completely
              > inside the content-div. Why does this happen?[/color]

              A floated item is out of the normal flow. The top of the floated item is
              at the top of its container. Since the container has 10px of padding
              applied, the item's top is 10px down from the top of the container
              (content-div).
              [color=blue]
              > When setting float:left for the second link the content-div collapses to
              > just a few pixels of height. The links are then placed below the
              > content-div. Why does this happen? I had expected that the div still
              > encloses the links.[/color]

              A floated item is out of the normal flow. Since both links are now
              floated, there is no longer any content in content-div.
              (The "few pixels of height" for content-div are due its 10px declared
              padding.)
              [color=blue]
              > I feel like missing a very fundamental conception of the float-property.
              > Where could I read about more details about this? Does anybody know a good
              > online-ressource (or maybe a offline book) about this?[/color]

              Visual formatting model
              http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

              2. Floats. .... taken out of the flow ....

              Visual formatting model
              http://www.w3.org/TR/CSS21/visuren.html#floats

              "Since a float is not in the flow, ...."

              --
              Gus

                Comment

                Previous template Next
                Working...