Author Archives: tabcom

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

Media Queries

Media queries enable us to create a responsive experience, where specific styles are applied to small screens, large screens and anywhere in between. The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

Continue Reading →

Media Queries was last modified: May 26th, 2015 by tabcom