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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Bridget Wilson
Bridget Wilson
8,006 Points
Posted by Bridget Wilson
Bridget Wilson
8,006 Points

2 column layout not working

I'm not sure what I am doing wrong but I cannot seem to get the two column layout to work on my contact page. As far as i can tell the code in my responsive.css and contact.html files matches the videos but I still only have one column. I have used multiple browsers so I can only guess the problem isn't a browser issue. I have included a link to screenshots of the relevant css and html files. Any suggestions for what I've done wrong?

https://drive.google.com/folderview?id=0B94I0w2oe0d_MGRPdUlYLTdZLUk&usp=sharing

6 Answers

Daniel Jackson
Daniel Jackson
15,099 Points

Oh ok I think I found it. You haven't linked to your responsive.css file in the head of your contact.html file

See if that works!

Daniel Jackson
Daniel Jackson
15,099 Points
Daniel Jackson
Daniel Jackson
15,099 Points

Try giving the wrapper div a set width.

When child elements are set to 50% they have to be 50% of the parent element. Child elements can't be 50% of an undefined value, as is the case when your wrapper dive doesn't have a set width. Does that make sense?

Hope this helps. Let me know if it works!

Bridget Wilson
Bridget Wilson
8,006 Points
Bridget Wilson
Bridget Wilson
8,006 Points

Hi Daniel, Thanks for the suggestion. I have the wrapper div a max-width of 940px in my main.css file, while checking that it occurred to me that my screen might just not fit 940px so I tried shrinking it to 600px and raising it to 1300px but neither of those sizes impacted the number of columns so it seems the problem is unrelated to the size of the wrapper div. Thanks again though!

Daniel Jackson
Daniel Jackson
15,099 Points
Daniel Jackson
Daniel Jackson
15,099 Points

Your welcome!

Can you post your main css file as well? It can be hard to determine the issue without enough information.

Bridget Wilson
Bridget Wilson
8,006 Points
Bridget Wilson
Bridget Wilson
8,006 Points

I updated the google drive folder to include the main.css file, it was long so i had to use multiple pictures, css1 is the top and css5 is the bottom. Thanks!

Daniel Jackson
Daniel Jackson
15,099 Points
Daniel Jackson
Daniel Jackson
15,099 Points

Thank you for posting the file!

I'll take a look at it and see if I can find the issue.

In the mean time try this!

Using chrome right click on the problem element and select inspect element. This will show the developer console window. The main top window (the one with elements tab selected) shows the HTML and the smaller window to the right (with styles tab selected) shows what CSS styles are being applied. The bottom window is the javascript console but don't worry about that now.

Using the styles window to the right, look at the list of styles and see what is being applied or not being applied that might be causing issues. You can also go in there and turn styles off, change values or add styles on the fly to see what might fix your issue.

The developer console is a great way to debug your site!

Bridget Wilson
Bridget Wilson
8,006 Points
Bridget Wilson
Bridget Wilson
8,006 Points

Ah, I see it now! I knew it would be something simple but important. I have linked it and I now have 2 columns. Thank you again!

Theresa Zicker
Theresa Zicker
758 Points
Theresa Zicker
Theresa Zicker
758 Points

I see that you're discussing "linking" the responsive.css file in the head of the contact.html file...but (as far as I can tell) mine are linked exactly the same way as Nick has done in the video, but none of the code I've created in the responsive.css file seems to be affecting any of the three pages. Any help would be greatly appreciated!

<html>
  <head>
    <meta charset="utf-8">
  <title>Tess Zicker | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Shadows+Into+Light|Libre+Baskerville|Tangerine|Changa+One|Open+Sans|Merriweather|Indie+Flower|Play|Pacifico|Dancing+Script|Vollkorn:700italic,400,700|Coming+Soon|Special+Elite|Chewy|Amatic+SC|Voltaire|Lobster+Two|Cinzel:400,900|Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>