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 CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

Is There A Command In CSS

Is There A Command In CSS That Will Cause Images To Swing Next To Each Other, I Have A Million Photos And They Are All Stacked On Top Of Each Other. This Is The HTML For This Page:

<!DOCTYPE HTML>

<html lang="en">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>Edwin & Walter Hawkins</title>

 </head>

<body>
  <div class="container clearfix"> 

    <p id="Edwin & Walter Hawkins.html"></p><br>

       <h2><em>Edwin & Walter Hawkins</em></h2><br>    


      <p>In 1985, Maggie joined forces of the “Professional Recording Music Industry”.and signed with Walter & Edwin Hawkins as their choral instructor and church musician. She served as Music Director for the Bay Area Chapter of the Edwin Hawins Music and Arts Seminar. Under her musical direction, they recorded their first recording entitled “HOLD ON”, written and arranged my Maggie in 1987. Their second recording was released in 1991, entitled “JOB” (also written and arranged by Maggie), would open several more musical doors for her. Maggie won an award for co-producing with Edwin Hawkins and writing the majority of the songs on the “JOB” CD.</p><br>
    </div>

    <div>
          <div class="grid_4">
          <img src="img/Edwin & Walter Hawkins.jpg" alt="Edwin & Walter Hawkins">
          <h4><em>Edwin & Walter Hawkins</em></h4><br>          
      </div>

     <br> 

     <div>
          <div class="grid_8">
          <img src="img/LC-YAC Reunion - Song Leads.jpg" alt="LC-YAC Reunion - Song      Leads">
          <h4><em>LC-YAC Reunion - Song Leads</em></h4><br>      

      </div>


     <br> 

      <div class="grid_12">
          <img src="img/The Bay Area Chapter of the Edwin Hawkins Music and Arts Seminar.jpg" alt="The Bay Area Chapter of the Edwin Hawkins Music and Arts Seminar">
          <h4><em>The Bay Area Chapter of the Edwin Hawkins Music and Arts Seminar</em></h4><br>
      </div>    

            <br>
          <br>     

     <a href="Dr. Maggie Wincher.html" class="btn"><em>Home</a></em><br>

            <br>
          <br>     

  </div>

 </body>
</html>
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

This Is My CSS

/*
Width:1000px
# Columns:12
Column width:65px
Gutter:20px

*/
.grid_1 { width:65px; }
.grid_2 { width:150px; }
.grid_3 { width:235px; }
.grid_4 { width:320px; }
.grid_5 { width:405px; }
.grid_6 { width:490px; }
.grid_7 { width:575px; }
.grid_8 { width:660px; }
.grid_9 { width:745px; }
.grid_10 { width:830px; }
.grid_11 { width:915px; }
.grid_12 { width:1000px; }

.grid_1,
.grid_2, 
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin:0 20px 10px 0;
    float:left;
    display:block;
}


.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width:1000px;
    margin:auto;
}

.clear{
    clear: both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0
}

.clearfix:after{clear:both;
    content:' ';
    display:block;
    font-size:0;
    line-height:0;
    visibility:hidden;
    width:0;
    height:0
}

5 Answers

Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

How large are your images?

Jennifer Rai
PLUS
Jennifer Rai
Courses Plus Student 13,164 Points
Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Hi Crystal - I see a few things going on here.

  1. You have block level elements (the h4 tags) inside of inline elements (the em tags). That should be switched. Inline elements should be inside of block elements, so the h4 comes first, then the emphasis tag.

  2. You shouldn't have spaces in your image names. Some browsers will collapse the spaces and with some you need to express spaces as %20. Either way, it is a much better practice to just not have spaces. Use dashes instead separate words in an image name if you need to.

  3. This may just be because you didn't paste all of your code, but it looks like you are missing a closing div tag or you have an extra opening div tag here:

  <div>
      <div class="grid_6 omega">
      <img src="img/LC-YAC Reunion - Song Leads.jpg" alt="LC-YAC Reunion - Song Leads">
      <em><h4>LC-YAC Reunion - Song Leads</h4></em><br>          

  </div>

If your div tags are off and you have a bunch of these listed on your page, that would explain why they are all stacked up. Otherwise, there may be a problem with your grid css, but I suspect that it is the extra div tag.

Hope that helps!

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

Thanks Jennifer, Nothing Changed :-) The Photos Are Still Stacked Like Cord Wood Against A Fireplace

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

That Did Cross My Mind, And Then It Left...LOL

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

Thank You So Much, Enjoy Your Evening. :-)

Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

You're welcome :-)