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

Posted by jamie craven
jamie craven
Courses Plus Student 1,074 Points

Working with Grids

I've just got to the working with grids video on the smells like bakin video and I've got my code typed out the same as in the video (as far as I can tell) but the "cupcake of the week" and "Fresh out the oven" section are not aligned next to each other as is the same with "Inside the kitchen" and "Get bakin with us" and the copyright section doesn't seem to be spanning all 12 columns.

Please help, here is my code from index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin Cupcake Company</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
  </head>
  <body>
<div class="container clearfix">
    <div class="grid_4">
        <img src="img/logo.gif" alt="Smells Like Bakin">
    </div>
    <div class="grid_8 omega">
        <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Location</a></li>
        <li class="last"><a href="#">Contact us</a></li>
        </ul>
    </div>
    <div id="intro" class="grid_9">
        <h1>Oposites really do attract, especially in our kitchen! We combine unexpected flavours that melt together to create ironically delicious desserts.</h1>

        <p><a href="#" class="btn">Browse our cupcakes</a></p>
    </div>
    <div class="grid_3 omega">
        <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
    </div>
    <div id="featured-cupcake" class="grid_7">
        <h2>Cupcake Of The Week</h2>
        <p>This weeks featured cupcake is the Avocado chocolate cupcake. It's strange combo of flavours will kick your taste buds into fiesta mode!</p>

        <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">

        <div id="new cupcakes" class="grid_5 omega">
            <h2>Fresh out the oven</h2>
            <p>Our newest cupcakes are Bakin Me Crazy and Jalepeno So Spicy.</p>
            <img src="img/new-cupcake-bacon.jpg" alt="Bakin Me Crazy">
            <img src="img/new-cupcake-Jalapeno.jpg" alt="Jalapeno So Spicy">
         </div>


        <div class="grid_7">
            <h2>Inside The Kitchen</h2>
            <p>Smells Like Bakin started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way to make a business out of her tasty treats. Flash forward to today &amp; they have a successful store front, catering business and cpcake truck.</p>
        <p><a href="#" class="btn-small">Read more</a></p>
      </div>

    <div class="grid_5 omega">
        <h2>Get Bakin With Us</h2>

        <div id="contact">
            <p>Call us:<span> 01472-111222</span><br>
            Email us: <a href="#">fakeemail@fake.com</a></p>
       </div>

       <p>We announce all of our flavours here through facebook &amp; even take requests for new flavours.</p> 
        <a href="https://www.facebook.com/groups/hullmpm/"><img src="img/facebook.gif" alt="facebook"></a>
        <a href="https://twitter.com"><img src="img/twitter.gif" alt="twitter"></a>
      </div>

    <div id="copyright" class="grid_12">
    <p>&copy; Copyright 2013 jamie craven. All rights reserved.</p>
    </div>







</div>

</body> </html>

jamie craven
jamie craven
Courses Plus Student 1,074 Points

also i have no idea why the top part of my code from my index isn't going into here as code and not as text :(

seriously in need of help.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Jamie:

The code appears when you indent four spaces, try that.

2 Answers

Chris Mitchell
Chris Mitchell
12,719 Points
Chris Mitchell
Chris Mitchell
12,719 Points

check your code again... there are 2 missing closing tags in your markup, check you featured div section and container.

Try putting all of your code to the left and then indent each piece step by step, it will help you to put your code into order. Also make lots of "comments" <div class="container clearfix"> <!-- start of container -->

 <div class"header">    <!-- start of header etc etc etc

</div> <!-- end of container -->

jamie craven
PLUS
jamie craven
Courses Plus Student 1,074 Points
jamie craven
jamie craven
Courses Plus Student 1,074 Points

Thanks I think I sorted it now :)