Help understanding floating with 3 col's

HTML & CSS
1

See here:
BeerOptics

The three repeating text bodies are three separate columns which I want to fall side by side each other filling the white space. I’m not clear on the rules of floating or how to get them to each use the same “top” starting point with out relying on the previous col’s height and margins.

Thanks.

2

At the moment, you have each div within the other. Instead of that, just place them one after the other, and they will float beside each other. Ideally, wrap all three together in a container div.

3

Thanks, I thought I did but then when you said that I looked and saw that I had forgotten to add the “/” in the closing div tag.

4

Essentially floats can either be your friend or your worst enemy but if you give them a little love from the start they will play nice forever, the main issue developers run into and even i have is clearing floats which is more of a problem in IE which causes undesired page layouts. For instance the below code will work fine in all browsers but the problem is when we start adding markup after the columns which causes whats called an “overflow” issue.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS float clearing</title>
<style type="text/css">
<!--
    .column {
        float: left;
        width: 200px;
    }
    
    .column p { padding: 5px; }
-->
</style>
</head>
<body>

<div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

</body>
</html>

To fix this issue there are 2 ways i personally like which is to hide the overflow or using a class called clearfix which both can be used on a parent container to clear the floats. See the below examples…

Hiding the overflow of the parent container

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS float clearing</title>
<style type="text/css">
<!--
    .clear { overflow: hidden; }
-->
</style>
</head>
<body>

<div class="clear">
    <!-- columns would go here -->
</div>

</body>
</html>

Using the .clearfix class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS float clearing</title>
<style type="text/css">
<!--
    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        line-height: 0;
        visibility: hidden;
    }
-->
</style>
</head>
<body>

<div class="clearfix">
    <!-- columns would go here -->
</div>

</body>
</html>

Essentially they both do the same thing but hiding the overflow can sometimes act in strange ways depending on your markup so i personally would recommend using the clearfix class. Hope that helps bud.

5

Excellent, thank you.

6

Remember that IE7 and below don’t understand any of those methods for containing floats and instead you need to induce halsayout which can be with a dimension or by using the proprietary zoom:1.0. :slight_smile: