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 Build a Simple Website Creating a Website Structure Working with Grids

Posted by Todd Clift
Todd Clift
3,637 Points

Grids don't layout in Chrome, but do in DW Preview

Here is my code:

<div id="featured-cupcake" class="grid_7"> <h2>Cupcake of the Week</h2> <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange comb of flavors will kick your taste buds into fiesta mode!</p> <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake" </div>

  <div id="new-cupcakes" class="grid_5 omega">
    <h2> Fresh Out the Oven</h2>
    <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>. </p>
    <img src="img/new-cupcake-bacon.jpg" alt=Bacon Me Crazy">
    <img src="img/new-cupcake-jalapeno.jpg" alt=Jalapeno So Spicy">
  </div>

Cupcake of the Week and Fresh out of the oven elements are side by side on the grid in my DreamWeaver preview, but Fresh out of the oven gets bumped down on my Chrome and Explorer browsers. What am I doing wrong?

Thanks for any help!

Cheers,

Todd

Todd Clift
Todd Clift
3,637 Points

Okay, I'm a total noob. My code was too long for the window. See if you can get it here at codepen. I'll post all the code if necessary. http://codepen.io/anon/pen/gzIKG

5 Answers

Gary Mann
Gary Mann
8,639 Points

In codepen, you can click the 'open settings' icon on the top left corner of your html. Then click "analyze html" on the bottom of the dropdown menu that opens up.

It'll point you in the right direction to where you're missing a closing 

>

on one of your images. And you're missing a single paranthesis in a couple different spots.

http://codepen.io/GaryMann/pen/JtDvb

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

The only other thing I did there was wrap everything in a div class="container". And I put their grid.css file in the css section to see if it worked. (The .container div is styled in grid.css)

Todd Clift
Todd Clift
3,637 Points
Todd Clift
Todd Clift
3,637 Points

Thanks for your help! I see where the closing > messed me up!
Thanks for the CodePen advice, too! It's my first time using it. I ran the "analysis" and it gave me these errors: 'div' is not a valid attribute of the <img> element. 'crazy"' is not a valid attribute of the <img> element. 'me' is not a valid attribute of the <img> element. 'so' is not a valid attribute of the <img> element. 'spicy"' is not a valid attribute of the <img> element.

Gary Mann
Gary Mann
8,639 Points

Right. In each of those cases, you'll find a missing paranthesis. Pause for a second and try to understand how the computer is reading those lines without the proper parentheses.

alt=Jalapeno So Spicy"

alt="Jalapeno So Spicy"

alt=Bacon Me Crazy"

alt="Bacon Me Crazy"
Todd Clift
Todd Clift
3,637 Points
Todd Clift
Todd Clift
3,637 Points

Thanks for your help! I see where the closing > messed me up!
Thanks for the CodePen advice, too! It's my first time using it. I ran the "analysis" and it gave me these errors: 'div' is not a valid attribute of the <img> element. 'crazy"' is not a valid attribute of the <img> element. 'me' is not a valid attribute of the <img> element. 'so' is not a valid attribute of the <img> element. 'spicy"' is not a valid attribute of the <img> element.

Todd Clift
Todd Clift
3,637 Points
Todd Clift
Todd Clift
3,637 Points

I see my mistakes now! Thank you very much for your help! It's all about the little details. Your advice will help me pay closer attention. Thanks again!