Confused with floats

HTML & CSS
1

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 :confused:

So far, here is what I have:


#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?

2

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” :slight_smile:

3

yes :slight_smile:

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:

<!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 :slight_smile:

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

4

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 [URL=“http://www.sitepoint.com/forums/showthread.php?t=567147”]this thread also.

5

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. :slight_smile:

6

lol - I think you just made it harder to understand :slight_smile:

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.


<!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

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 :twocents:

8

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?