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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Posted by Victoria Papsco
Victoria Papsco
1,304 Points

I used my own pictures but because they're different sizes, they don't line up anymore because of how float is working.

Thus, it looks like this right now: http://imgur.com/CxfN9Qi (in this I had it float: right to see if that did anything)

I tried looking into using columns, but then the text description and the underlying color became the second column instead of the pictures.

I figure theres a way to have the images the same size so they go back to being next to each other without distorting them. I thought that the #gallery li with 45% width and 2.5% margin would be responsible for that? After playing around with it I figure that wasn't quite it haha. Any suggestions as to what sort of code should I be implementing here to fix this?

3 Answers

Christine Rose
Christine Rose
6,745 Points
Christine Rose
Christine Rose
6,745 Points

Please post your code so we can have a closer look. Be sure to use the backticks before and after the code block so it displays properly in the forum. The Markdown Cheatsheet link below the Add an Answer box (below) will show you how.

Without seeing the code, it just looks like your pictures have different aspect ratios, so when you set just the width, the computer automatically adjusts the height. That's why they're different heights.

Victoria Papsco
Victoria Papsco
1,304 Points
Victoria Papsco
Victoria Papsco
1,304 Points

Ah, apologies. I believe this is a css problem, but ill put the html in another answer. 

/************************************
  GENERAL
************************************/

body {
  font-family: 'Noto Sans', sans-serif;
}


#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/************************************
  HEADING
************************************/

header{
  float: left;
  margin: 0 0 30px 0; /* top, right, bottom, left or clockwise*/
  padding: 5px 0 0 0;
  width:100%;
}


#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Poiret One', cursive;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0; /* values: top, left and right, bottom*/
  font-weight: normal;
}

/************************************
  NAVIGATION
************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px; /*10px on left and right*/
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight:800;
  padding: 15px 10px;
}


/************************************
  FOOTER
************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height:20px;
  margin: 0 5px;
}

/************************************
  PAGE PORTFOLIO
************************************/

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

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

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.7left
  color: #bdc3c7
}


/************************************
  COLORS
************************************/


/*site body*/
body {
  background-color: #fff;
  color: #999;
}

/*green header*/
header {
  background: #6ab47b;
  border-color: #599a68;
}

/*nav background on mobile*/
nav {
  background: #599a68
}

/*logo text*/
h1, h2 {
  color: #fff;
}

/*links*/
a {
  color:#6ab47b;
}

/*nav link*/
nav a, nav a:visited {
  color: #fff;
}

/*selected nav link*/
nav a.selected, nav a:hover{
  color: #32673f;
}
Victoria Papsco
Victoria Papsco
1,304 Points
Victoria Papsco
Victoria Papsco
1,304 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Victoria Papsco | Artist</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic|Poiret+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Victoria Papsco</h1>
          <h2>Digital Artist</h2>
        </a>
        <nav>
           <ul>
             <li><a href="index.html" class="selected">Portfolio</a></li>
             <li><a href="about.html">About</a></li>
             <li><a href="contact.html">Contact</a></li>

           </ul>
        </nav>
      </header>
      <div id="wrapper">
        <section>
          <ul id="gallery">
            <li>
              <a href="img/cryolophosaurus.png">
                <img src="img/cryolophosaurus.png" alt="">
                <p>Experimentation with color and texture.</p>
              </a>
            </li>
            <li>
              <a href="img/torvosaurous contest.png">
                <img src="img/torvosaurous contest.png" alt="">
                <p>playing with blending modes in photoshop.</p>
              </a>
            </li>
             <li>
              <a href="img/revolver head.png">
                <img src="img/revolver head.png" alt="">
                <p>trying to create an 80's style.</p>
              </a>
            </li>
             <li>
              <a href="img/link hyrule warriors.png">
                <img src="img/link hyrule warriors.png" alt="">
                <p>Drips created using photoshop brushes.</p>
              </a>
            </li>
             <li>
              <a href="img/Terran.png">
                <img src="img/Terran.png" alt="">
                <p>made using repetitive shapes.</p>
              </a>
            </li>
            <li>
              <a href="img/Dino mix copy.png">
                <img src="img/Dino mix copy.png" alt="">
                <p>trying to create an 80's style.</p>
              </a>
            </li>
          </ul>
        </section>
        <footer>
          <a href="https://www.facebook.com/vpapsco"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
          <p>&copy; 2014 Victoria Papsco.</p>
        </footer>
      </div>
     </body>
    </html>