Css div not aligning properly

Question

I have some pretty simple CSS code that doesn't seem to be working right...

html, body { border:0; margin:0; padding:0; }
body { font:12px Arial, Helvetica, sans-serif; background: url(../img/bg-tile.png) repeat; color: #444}

.content{
    background-color:#CCDDEE;
    width:100%;
    margin: 0px auto;
}

.column{
    padding:0% 2% 0% 0%;
    width:29%;
    float:left;
    height:auto;
}

.myText{
    padding:0px 25% 0px 0px;
    font-size:16px;
}

.footer{
    margin-bottom:2%;
    padding:0px;
    position: absolute;
}

.wrapper { 
    width:75%;
    height:auto;
    margin:1% auto; 
}

My html looks like this:

<body>
    <div class="wrapper">
        <img src="img/logo2.jpg" alt="" />
                    <!--Snipped some code Just a nav -->
        <br /><br />
        <div class="content">
            <img src="img/slider6.jpg" alt="" /><br /><br />
            <div class="column">
                <p class="myText">
                Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text,
                </p>
            </div>
            <div class="column">
            <p class="myText">
                Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text,
            </p>
            </div>
            <div class="column">
            <p class="myText">
                Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text,
            </p>
            </div>
        </div>
        <br />
    </div>
    <div class="footer">
        &copy;2013 blahblahblah&reg; | Terms of Use | Privacy Policy | Press Inquiries
    </div>



</body>
</html>

The issue that I'm having is that my foot is sitting on top of my "columns" like so (image incoming)

Text overlap

score 1 · Accepted Answer · edited May 23 '17 at 12:33

Adding overflow:hidden; to the .content will make the .content correctly contain the floating elements. That will also make the background colour apply to the floating columns.

If you don't want the .content to contain the floated elements, add overflow:hidden; to the .wrapper instead.

The problem you are seeing is because of the float on the columns. CSS float takes the element out of normal flow and therefore the containing element's height will not take the floated element's height into consideration when being rendered.

Therefore the footer will be rendered after the content (correctly) but the .content has the wrong height.

An alternate way to do this is to clear the floated content - see http://css-tricks.com/snippets/css/clear-fix/ and What methods of ‘clearfix’ can I use?

Css div not aligning properly

1 Answers1