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

Jorien van der Voort
Jorien van der Voort
3,965 Points

Position of gallery images

I made a website with 3 pages with galleries. When I shrink the page, some images are shown on the right side and by themselves. But they should appear inline with the rest and the last one should float on the left side of the page. I can't find the error, this is the code in CSS:

gallery {

float: left; margin: 0; padding: 0; list-style: none; }

gallery li {

width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #66C2C2; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #66C2C2;

The first gallery acts fine except for one image (the 3rd one). In the 2nd and 3rd gallery the order starts to act strange, although these pages link to the same css documents. Maybe someone has an idea of what could be wrong.. ?

2 Answers

Hi Jorien!!

Would you mind attaching a link to your snapshot?

  1. Open your Workspace
  2. Click "Snapshot Workspace" (the camera icon left of "Preview Workspace")
  3. Click "Take Snapshot" then click again to open the Snapshot.
  4. Copy and share the url link :-)

Also... if you want to add code to a question or response in the forum, add of these "```" (the symbol above the tab key) before and after the code. (See Markdown Cheetsheet below input box)

for instance

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

doesn't look like I want it to..

So I add "```" before and after the code to get this.

wrapper {

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

(if right after the first one you enter the type you get the color coding)

"```css" gives you this:

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

++COOL HUH?++

(PS if someone answers your question and it helps, get in the habit of giving those around you an "upvote" or a "Best Answer".

It makes them feel good, and you'll find you need them (upvotes and Best Answers) later on, and also -others may return the favor!!! )

KEEP UP THE GOOD WORK, STAY ENCOURAGED AND KEEP CODING NO MATTER HOW HARD IT GETS!!!! :-) (and take notes)