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

Posted by Charlotte Luzuka
Charlotte Luzuka
Courses Plus Student 703 Points

My secondary column is not floating to the same height as my primary.

I am using the following code, but while my column floats right, it does not stay level with the primary column as I increase the size of the browser:

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

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

4 Answers

Charlotte Luzuka
Charlotte Luzuka
Courses Plus Student 703 Points

Hi

I figured it out. My width was missing a semi-colon after 50% :-D

David Tonge
PLUS
David Tonge
Courses Plus Student 45,640 Points
David Tonge
David Tonge
Courses Plus Student 45,640 Points

Hey Charlotte,

Could you also post your HTML?

Charlotte Luzuka
PLUS
Charlotte Luzuka
Courses Plus Student 703 Points
Charlotte Luzuka
Charlotte Luzuka
Courses Plus Student 703 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Charlie Luzuka | Angel </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Tenor+Sans|Roboto:400,900italic,700,500,400italic,500italic|Oswald:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewpoint" content="width-device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Charlie Luzuka</h1>
        <h2>Angel</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
        <section id="primary">
          <h3>General Information</h3>
          <p>I am available to assist any small to medium businesses to help them with their websites, eMarketing and process design.</p>
          <p> YOu can contact me via email, twitter, our Facebook page or telephonically.</p>
        </section>
        <section id="secondary">
          <h3>Contact Details</h3>
          <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:charlie@example.com">charlie@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=charliebn">@charliebn</a></li>
          </ul>
        </section>
        <footer>
          <a href="http://twitter.com/charliebn"><img src ="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
          <a href="https://www.facebook.com/pages/Kwantu-Wellness-Village/128141307381205?sk=manager&tab=scheduled_posts"><img src ="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
          <p>&copy; 2014 Charlie Luzuka.</p>
        </footer>
      </div>
   </body>
</html>
David Tonge
PLUS
David Tonge
Courses Plus Student 45,640 Points
David Tonge
David Tonge
Courses Plus Student 45,640 Points

Try rearranging your stylesheets. I'm guessing that responsive.css is throwing your code off at certain media queries