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 Sherry Evans
Sherry Evans
3,377 Points

Two Column Layout

Hi I was having trouble with this the other day but could not get the code to cut and paste properly. I hope i can now as I can't see what my error is. Here is my html <div id="wrapper"> <section id="primary"> <h3> General Information</h3> <p> empty</p> <p> I don't have a contact preference yet.</p> </section> <section id="secondary"> <h3> Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:no"></a></li> <li class="mail"> <a href="mailto:"></a> </li> <li class="twitter"><a href="http://twitter.com/intent/tweet screen_name=dublin09">@dublin09</a></li></ul> </section>

Here is my CSS code.

@media screen and (min-width: 480px) { /**************** TWO COLUMN LAYOUT ************/

#primary { width: 50%;
float: left; }

#secondary { width: 40%; float: right; }

}

Sherry Evans
Sherry Evans
3,377 Points

<div id="wrapper"> <section id="primary"> </section> <section id="secondary"> <h3> Contact Details</h3>

  </section>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sherry,

Some of your code is missing. Here's some info on how to post code: https://teamtreehouse.com/forum/posting-code-to-the-forum

What problem are you having?

5 Answers

John Breiner
John Breiner
6,918 Points
John Breiner
John Breiner
6,918 Points

Sherry, first thing I would do is account for left and right margins and padding. Make sure that and columns doesn't add up to over 100%. In fact I would set them with columns seeing the rest of code will help.

Stuart Ringold
Stuart Ringold
12,508 Points
Stuart Ringold
Stuart Ringold
12,508 Points

Here give this a shot. If you need to add gutters (spaces between the divs) make sure that everything does not exceed 100% 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        body{
            width: 100%;
            height: 100%;
        }
        #primary{
            background-color: green; 
            min-width: 30%;
            min-height: 45px; 
            float: left; 
        }

        #secondary{
            background-color: red; 
            min-width: 30%;
            min-height: 45px;
            float: left; 
        }

        @media screen and 
        (min-width: 480px){
            #primary{width: 50%;}
            #secondary{width: 50%;}
        }
        </style>
    </head>
    <body>
        <div id="primary"></div>
        <div id="secondary"></div>
    </body>

</html>
Sherry Evans
Sherry Evans
3,377 Points
Sherry Evans
Sherry Evans
3,377 Points

Hi I'm going to try one more time to post my code! <section id="primary"> <h3> General Information</h3> <p> empty</p> <p> I don't have a contact preference yet.</p> </section> <section id="secondary"> <h3> Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:no"></a></li> <li class="mail"> <a href="mailto:"></a> </li> <li class="twitter"><a href="http://twitter.com/intent/tweet screen_name=dublin09">@dublin09</a></li></ul> </section>

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sherry,

That's better. It looks like you have posted inline code with a single backtick. This works good for short code that you want to appear inline with the rest of the text you're typing.

For longer code like this it's better to surround with 3 backticks so that it shows up in a code block. The link I gave you should show you how to do this.

I think that you still haven't specified what your problem is. This will help us know what we should be looking at.

Sherry Evans
Sherry Evans
3,377 Points
Sherry Evans
Sherry Evans
3,377 Points

Here is my CSS! Thanks Jason for directing me to the posting directions! I didn't know they were there. I was following along with the video, but my 2 colmn layout is not happening. I can't figure out where I went wrong.

```@media screen and (min-width: 480px) { /**************** TWO COLUMN LAYOUT ************/

#primary { width: 50%;
float: left; }

#secondary { width: 40%; float: right; }

}```

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The 3 backticks should be on their own line. Try editing your post here and move @media... down to the next line and then also your closing 3 backticks should be on their own line after the closing curly brace.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

There doesn't seem to be anything wrong with what css you have posted.

It appears as a single column? Have you saved both your html and css files?

Perhaps describe where things are placed.

Sherry Evans
Sherry Evans
3,377 Points
Sherry Evans
Sherry Evans
3,377 Points

Hi I figured it out! The problem was with my style sheet! It wasn't attached to the page called responsive css. I now have my two columns! Thanks for all your help!