SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face confused with floats

    Hello folks.

    I am trying to create the CSS to match the attached image. I figure a picture is worth 1000 words, and probably faster and more accurate than me trying to explain it

    So far, here is what I have:
    Code:
    #photos {
      padding: 30px 0 30px 0;
      border-bottom: 1px solid #555;
    }
    
    #photos h2 { 
      float: left;
      text-align: left;
      display: inline;
      width: 200px;
      background: #00ff00;
    }
    
    .splitleft {
      text-align: left;
      float: left;
      padding: 0;
      margin: 0;
      width: 300px;
    }
    
    .splitright {
      text-align: left;
      float: right;
      padding: 0;
      margin: 0;
      width: 300px;
    }
    This works, mostly. The layout matches the attached image...but the actual photo layer is not filling (I am assuming because everything inside it is floated??) and the bottom border of #photos is way up near the top of the layer.

    Am I doing it wrong with floats? Is there an easier/better way?
    Attached Images Attached Images
    "Do or do not. There is no try." -- Yoda

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,039
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Try giving the photo layer overflow: auto;

    Also, padding: 30px 0 30px 0; can be written as padding: 30px 0;, #00ff00 as #0f0 and text-align: left is kinda redundant for western language browsers. If you do want to set that, I'd recommend setting at the start of your css for all elements at once, instead of on every element separately
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip(s)!

    Setting the overflow works. The #photo layer is actually filling now. Is there a better way to go about this though?
    "Do or do not. There is no try." -- Yoda

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Floats are removed from the flow and therefeore a parent that holds only floats holds nothing and has zero height.

    In order to make the parent surround the float you need to use a clearing mechanism and overflow other than visible is the easiest to apply when you don't need visible overflow.

    There are other methods that you can use but none so simple as the overflow method although you do also need to set haslayout on the parent element or ie6 won't clear (which is easiest done with a dimension such as a width).

    See the section on floats in the CSS faq for more information and a discussion in this thread also.

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Floats are removed from the flow and therefeore a parent that holds only floats holds nothing and has zero height.
    is this a correct assertion?

    a parent holding only floats... holds floats, which are more than nothing. the parent height is not affected by the floats height, true. like hanging out the clothes on a wire to dry, in which case the floats overflow the parent.

    but then you hang the clothes in a wardrobe, that is, you are "clearing" them. showing us he was always "their daddy"

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    is this a correct assertion?
    lol - I think you just made it harder to understand

    For all intents and purposes you can say that a parent that holds only floats will act as if it had no content at all. There will be no change or effect upon that element whether the float was there or not apart from the fact that foreground content will be repelled (or unless we create a new block formatting context which we can do with overflow other than visible (or display:table or display:inline-block).

    Floats are removed from the flow as defined in the specs.
    Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist
    Consider this example where the float is outside of the html for the element with a class of content yet the background of .content extends underneath the float.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .float {
        float:left;
        width:300px;
        height:30px;
        background:blue;
    }
    .content {
        background:red;
        width:325px;
    }
    
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="float">Float</div>
        <div class="content">
            <p>sometexthere</p>
            <p>sometexthere</p>
            <p>sometexthere</p>
        </div>
    </div>
    </body>
    </html>
    What happens is that .content is laid out as if the float wasn't there (which it isn't because it is removed from the flow) and then the margins on the foreground content are adjusted so that they steer clear of the float and wrap around (or under) it.

    The background and borders on elements adjacent to floats will act as if the float isn't there and will slide under the floats until they meet the containing block.

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes

    my point was not that one.

    what i said is this: floats are taken out of the normal flow, inside their parent container, with regards to their sibling elements. when you move the parent, the floats move also. so the parent is acting as if it holds them.

    your statement sounded more like saying that a parent with only floats will not contain them or control them: "parent that holds only floats holds nothing". it contains them all right, it just not fully contains them, hence the overflow.

    here is what i meant:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .float {
        float:left;
        width:300px;
        height:30px;
        background:blue;
    }
    #parent {
        background:red;
        position: relative;
        top: 300px;
    }
    
    </style>
    </head>
    <body>
    <div id="parent">
        <div class="float">Float</div>
        <div class="float">Float</div>
        <div class="float">Float</div>
    </div>
    </body>
    </html>
    you may not "see" the parent, but the parent holds the floats: when it moves they move. it just not containing the floats content (which is called overflowing) w/o clearing the floats. that is, it "acts" as if he has no height, not like "it had no content at all". it does act about its content. zero height doesn't mean zero content, in our case means overflowed content. incorrect assertion from your part

    and i think my clothing example is actually simple and accurate enough to be understood by anyone

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Folks, this thread was getting a bit nasty and flying off topic, so it's closed now. Sorry Ylang if you had more questions. If so, just post a new thread.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •