Knowledge Base

CSS Equal height colums

Most multi-column layouts use multiple float:left divs inside a container div.

Lets have a look at a simple main column and sidebar column layout:

HTML:

<div class="main">
    <div class="container clearfix">
        <div class="content">
            <section>
                <h1>This is the Main Content</h1>
                <hr>
                <h2>A sub heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
            </section>
        </div>
        <div class="sidebar">
            <aside>
                <h2>This is a sidebar</h2>
                Sign up to the newsletter!
            </aside>
        </div>
    </div><!-- /.container -->
</div><!-- /.main -->

Go here and paste the above code into the HTML pane.

Continue Reading →

CSS Equal height colums was last modified: May 26th, 2015 by tabcom

Container div with float elements inside

Problem

Suppose we have a <div id=”container”> containing float:left, float:right and normal flow block and inline content. The container is given a width value.

I want the container div width to adjust to the width of the content inside.  However, the container div will only shrink to fit the non-floating elements only.  The floating elements will be either all the way out, or half out, half in, and not have any bearing on the size of the container div.

Example – Float left with fixed width container that is too small

Continue Reading →

Container div with float elements inside was last modified: May 26th, 2015 by tabcom