Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Derrick Plunk
Derrick Plunk
Courses Plus Student 2,710 Points

3-Column Layout Problem

I'm having an issue getting my 3-column layout to work properly. This is what I am trying to accomplish: Design Comp This is as close as I can get it. Development Photo

Currently, I have the layout setup in a grid using Pure and have all 3 classes inside the wrapper What I have tried:

  1. Setting up the .col-nav & .col-social outside of the wrapper and leaving .col-main inside the wrapper

  2. Putting all 3 classes inside the wrapper (breaks when scaling down)

  3. Flexbox (got it working, but low cross-browser support)

  4. adjusting widths and using floats (worked in Chrome, broke in fire fox & IE)

Any help would be greatly appreciated. I've been trying to get this working for two days now and think I just need some fresh eyes on it to see where the breakdown is happening.

Here is the code:

<div class="pure-g wrapper">

    <ul class="pure-u-2-24 col-nav">
        <li><a href="services.html"><strong>SERVICES</strong></a></li>
        <li><a href="furniture-installtions.html"><strong>FURNITURE&nbsp;INSTALLS</strong></a></li>
        <li><a href="testimonials.html"><strong>TESTIMONIALS</strong></a></li>
        <li><a href="work-showcase.html"><strong>WORK SHOWCASE</strong></a></li>
        <li><a href="contact-us.html"><strong>CONTACT</strong></a></li>
    </ul>
    <div class="pure-u-18-24 col-main">
        <h1>BOLT&nbsp;&nbsp;&nbsp;</h1>
        <p>PARAGRAPH TEXT</p>
        <p>PARAGRAPH TEXT</p>
    </div>
    <div class="pure-u-1-24 col-social">
        <ul>
           <li><a href="www.facebook.com/boltfdi"><strong>f</strong></a></li>
           <li><a href=""><img src="img/instagram_logo.png"/a></li>
        </ul>
    </div>
</div>

.col-nav {
    width:18%;
    position:relative;
    margin-top:1%;
    z-index:3;
    display:inline-block;
}

.col-nav li {
    position:relative;
    list-style-type:none;
    text-align:right;
    padding:0.25em 0.5em 0.25em 0.5em;
}

.wrapper {
    width:70%;
    background-color:#efefef;
    margin: 0 auto;
}
.col-main {
    display:inline-block;
    padding-left:2%;
    background-color:#efefef;
    border-right:10px solid #acacac;
    z-index:1;
}

.col-social {
    width:7%;
    display:inline-block;
    position:relative;
    z-index:3;}
.col-social li {
    background-color:#333;
    list-style-type:none;
    padding:0.25em 0.60em 0.25em 0.5em;
}

4 Answers

Michael Fraser
Michael Fraser
19,084 Points
Michael Fraser
Michael Fraser
19,084 Points

Hi Derek,

Not too sure what the main issue was, and your html was missing some tags from the start of the doc, so I've improvised a layout from your design comp:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <link rel="stylesheet" href="alt-style.css">
</head>
<body class="">
    <header class="">
        <h1>BOLT furniture delivery installation</h1>
    </header>
    <section class="slider">
        <div>Dummy Content</div>
    </section>
    <section class="content pure-g">
        <nav class="pure-u-6-24 col-nav">
            <ul >
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">FURNITURE&nbsp;INSTALLS</a></li>
                <li><a href="#">TESTIMONIALS</a></li>
                <li><a href="#">WORK SHOWCASE</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
        <div class="pure-u-16-24 col-main">
            <h1>BIG TITLE</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, corporis, adipisci reprehenderit ut earum officiis delectus ullam culpa saepe in qui facere suscipit velit. Dignissimos, deserunt nesciunt quam praesentium beatae!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, corporis, adipisci reprehenderit ut earum officiis delectus ullam culpa saepe in qui facere suscipit velit. Dignissimos, deserunt nesciunt quam praesentium beatae!</p>
        </div>
        <div class="pure-u-2-24 col-social">
            <ul>
                <li><a href="#">f</a></li>
                <li><a href="#">I</a></li>
            </ul>
        </div>
    </section>
    <footer></footer>
</body>
</html>

Main issues I could see you were having were:

  1. The second layer of the col-main background was the full width of the 3 columns, rather than halfway behind the nag / social links

  2. The footer was riding up the page.

CSS below answered those probs for me - used a pseudo element for the extra background, and absolutely positioned the footer at the bottom of the page, with padding added to col-main to stop overlap. It isn't perfect; pages without enough content are going to have problems, but it's the best google could give me. (I've added loges of temp background colours for my own benefit...) As for browser compatibility, pseudo element will fail in ie7 & below, but its only cosmetic. Min-height will play up in some ie as well I think. 

/* General stuff for making life easier
-------------------------------------*/

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html {
    height: 100%; }
body {
    min-height: 100%;
    background-color: #555; }

/* Stuff for top of Page
-------------------------------------*/
header {
    background-color: red;
    height: 100px;
    z-index: 25; }
header h1 {
    width: 300px;
    height: 150px;
    margin-right: 300px;
    background-color: #b00;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 50;
    text-align: center; }
section.slider {
    background-color: #ddd;
    height: 200px; }

/* Using Pseudo element for background layer of design,
/* allowing you to keep the Pure class names  for the columns correct
/* Note: will fail in IE7 & below, but as it's only decorative no worries
-------------------------------------*/
section.content {
    width: 80%;
    margin: 0 auto;
    z-index: 20;
    position: relative; }
section.content::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5%;
    right: 5%;
    z-index: -1;
    background-color: #eee; }

/* Keeping the Footer at the bottom, without it overlapping the content
-------------------------------------*/
.col-main {
    background-color: white;
    padding: 2em;
    padding-bottom: 300px;
    min-height: 100%; }
footer {
    width: 72.5%;
    height: 200px;
    margin: 0 auto;
    position: absolute;
    background-color: #999;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    border-radius: 100px 100px 0 0; }

/* Temp Nav Styling
-------------------------------------*/
.col-nav ul, .col-social ul {
    list-style-type: none;
    width: auto;
    padding: 1em 0.5em;
    background-color: black;
    margin-top: 0; }
.col-nav li, .col-social li {
    margin: 0 0.5em;
    border-bottom: 1px solid #666; }
.col-nav li a, .col-social li a {
    display: block;
    padding: 0.5em;
    color: white;
    text-decoration: none; }
.col-nav li a {
    text-align: right;
    font-size: 0.5em; }
.col-social li a {
    text-align: center; }
Stuart Ringold
Stuart Ringold
12,508 Points
Stuart Ringold
Stuart Ringold
12,508 Points

Are you trying to accomplish something like this:

Style: 

    .banner_div{
        width: 100%;
        min-height: 350px;
        background: red;
    }
    .main_div{
        width: 90%;
        margin: auto;
        position: relative;
    }


    .col{
        float: left;
        min-height: 600px;
    }
    .left, .right{
        width: 20%;
        background: blue;
    }
    .middle{
        width: 60%;
        background: yellow;
    }

Body: 

<div class="banner_div"></div>
<div class="main_div">
    <div class="left col"></div>
    <div class="middle col"></div>
    <div class="right col"></div>

</div>
Derrick Plunk
PLUS
Derrick Plunk
Courses Plus Student 2,710 Points
Derrick Plunk
Derrick Plunk
Courses Plus Student 2,710 Points

Thanks so much Michael! That was definitely what I was trying to accomplish. The site look fantastic now! I had a couple more questions about how you did the layout.

  1. Did you set the min-height on the html and body elements so that the child elements would have a parent to refer to?

  2. Why did you make ::before selector absolute?

Michael Fraser
Michael Fraser
19,084 Points
Michael Fraser
Michael Fraser
19,084 Points

Hi Derrick, Glad to help. Regarding your questions -

  • min-height is so that the footer will stay at the bottom of the page when there isn't much content. It's as you guessed; so later elements have it to refer to. I just checked in safari (vers 7.0.3) and you can ditch those height rules and it'll still work, so it might be worth checking with a few browsers as to whether its needed.

  • Making the ::before selector absolute takes it out of the doc layout ordering, so it doesn't interfere with anything else. Main grief I had was dealing with all the z-index's you have to set to get it in the right place though.

WHOOPS Realised I dropped a selector - you need to add position: relative to the body, otherwise the footer follows the viewport height rather than the height of your content. Apologies.