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

CSS

Nick Tosto
Nick Tosto
8,574 Points
Posted by Nick Tosto
Nick Tosto
8,574 Points

positioning elements side by side

I completed the "Make a Website" video tutorial and I've been tweaking it to add my own content to make a portfolio. I'm having trouble making my h1 elements in the second row appear side by side. I've tried doing float:left and right, and display: inline-block but it still appears a line below the first h1 element.

https://www.dropbox.com/s/i0x2el6dk2pjcq1/screencapwtf.png

Can anyone help me get these elements to line up?

6 Answers

Tawny Bartlett
Tawny Bartlett
24,674 Points
Tawny Bartlett
Tawny Bartlett
24,674 Points

Tis a little bit tricky to solve without the code... Could you paste in the div structure?

James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

You're missing </li> or </div> somewhere. check your tags for completion.

Nick Tosto
Nick Tosto
8,574 Points
Nick Tosto
Nick Tosto
8,574 Points

Sure, thanks for the help: here's the HTML code for the body:

 <section>
    <h1>Websites</h1>
    <ul id="gallery">
      <li> <a href="http://www.timbercreekhomesga.com/"> <img src="img/tc-screenshot.png" alt="Timber Creek Screencap">
        <p><b>Timber Creek Custom Homes</b><br>
          Website built for a small custom home building company. Created website, graphics, edited copy, and took photos</p>
        </a> </li>
      <li> <a href="http://ophthalmology.nm.org/"> <img src="img/northwestern-screencap.png" alt="NM Screencap">
        <p><b>Northwestern Medicine</b><br>
          Example of over 200 websites I helped create for Northwestern Memorial Hosptial using Weebly CMS</p>
        </a>
    </ul>
  </section>
  <section style="clear:both">
    <h1>Android Apps</h1>
    <ul id="gallery">
      <li> <a href="http://str.pthosted.com/"> <img src="img/barbados-screencap.png" alt="Barbados Screencap">
        <p>Experimentation with color and texture</p>
        </a> </li>
    </ul>
    <ul id="gallery">
      <h1>Artwork</h1>
      <li> <a href="http://str.pthosted.com/"> <img src="../art2.png" alt="Art">
        <p>Experimentation with creating art in Photoshop</p>
        </a> </li>
    </ul>
  </section>

and the CSS for the gallery:

#gallery{
margin:0;
padding:0;
list-style:none;
}

#gallery li{
 float:left;
 width:45%;
 margin:2.5%;
 background-color:#f5f5f5;
 color:#bdc3c7;
 border:thin;

}

#gallery li a p{
  margin: 0;
  padding: 5%;
  font-size:0.75em;
  color:#bdc3c7;
}
#gallery li img{
    border:2px solid;
    border-color:#f5f5f5;
}
James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

First off, you can only have 1 item that has an ID of gallery, you have 2. If you want them to be the same CSS you need to make them a class. ID is specific to one object in the DOM.

James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points 
<html>
<head>
    <style type="text/css">
    .gallery{
    margin:0;
    padding:0;
    list-style:none;
    }

    .gallery li{
     width:45%;
     margin:2.5%;
     background-color:#f5f5f5;
     color:#bdc3c7;
     border:thin;
     display: inline-block;
    }

    .gallery li a p{
      margin: 0;
      padding: 5%;
      font-size:0.75em;
      color:#bdc3c7;
    }
    .gallery li img{
        border:2px solid;
        border-color:#f5f5f5;
    }    
    </style>
</head>
<body>
    <section>
        <h1>Websites</h1>
        <ul class="gallery">
          <li> <a href="http://www.timbercreekhomesga.com/"> <img src="img/tc-screenshot.png" alt="Timber Creek Screencap">
            <p><b>Timber Creek Custom Homes</b><br>
              Website built for a small custom home building company. Created website, graphics, edited copy, and took photos</p>
            </a></li>
          <li> <a href="http://ophthalmology.nm.org/"> <img src="img/northwestern-screencap.png" alt="NM Screencap">
            <p><b>Northwestern Medicine</b><br>
              Example of over 200 websites I helped create for Northwestern Memorial Hosptial using Weebly CMS</p>
            </a></li>
        </ul>
      </section>
      <section style="clear:both">
        <h1>Android Apps</h1>
        <ul class="gallery">
          <li> <a href="http://str.pthosted.com/"> <img src="img/barbados-screencap.png" alt="Barbados Screencap">
            <p>Experimentation with color and texture</p>
            </a> </li>
        </ul>
        <h1>Artwork</h1>
        <ul class="gallery">
          <li> <a href="http://str.pthosted.com/"> <img src="../art2.png" alt="Art">
            <p>Experimentation with creating art in Photoshop</p>
            </a> </li>
        </ul>
      </section>
</body>
</html>
Nick Tosto
Nick Tosto
8,574 Points
Nick Tosto
Nick Tosto
8,574 Points

Thanks for the response James and Tawny. I didn't realize the id tag could only be used for one item. Should I even have them as two separate ul's in this case? I was just trying things out. I'm still having trouble with this even with the edited code that you added. Should I make them into their own divs to position the h1/image pairs together?

James Andrews
James Andrews
7,245 Points

encapsulate your 2 and 3rd gallery in a <section> and have them float left but you'll also have to give them widths and heights so they are the right size otherwise they shrink to itty bitty

Also there were 2 mistakes in the code i put up a missing close LI and an H1 inside the UL which is bad. so I fixed them by editing my response.