Reputation: 13

I do not understand css float

I am confused as to why when I float an object it no longer expands the border of the container it is in. Here is a simple bit of code I start with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Learning CSS</title>

<style>
    .content 
    {
        border: #000000 solid 3px;
        clear: left;
        padding: 1em;
    }

    .stuff
    {

    }

</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
    <h2>Page 1</h2>
    <p>Text...</p>
    <div class="stuff">
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
    </div>
    </div>
</body>
</html>

This link will display the results of this code

When I change the style of .stuff to: .stuff { float:right; }

This link shows what I get now

I would appreciate someone explaining why the floating content no longer expands the parent div or is contained in the parent div .content ?

thanks in advance

Upvotes: 0

Answers (5)

Chris Calo

Reputation: 7828

To have a float expand the border of the container it is in you will need to apply what is called a clearfix to the container. There are probably a dozen different ways to do this, so instead of giving you one, I'll refer you to an excellent question whose answers list several: What methods of ‘clearfix’ can I use?

Upvotes: 0

Dillmo

Reputation: 194

You need to use the clearfix hack to fix this. Try this code instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Learning CSS</title>

<style>
    .content 
    {
        border: #000000 solid 3px;
        clear: left;
        padding: 1em;
        zoom: 1;
    }

    .stuff
    {
        float: left;
    }

    .content:before, .content:after
    {
        content: "";
        display: table;
    } 

    .content:after
    {
        clear: both;
    }

</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
    <h2>Page 1</h2>
    <p>Text...</p>
    <div class="stuff">
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
    </div>
    </div>
</body>
</html>

Upvotes: 0