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

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

Hi

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

Hey Charlotte,

Could you also post your HTML?

<!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>

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