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

Posted by thimoschroeder
thimoschroeder
23,470 Points

HTML / CSS image gallery breaks out after two rows - help !!

Hey, my HTML / CSS image gallery breaks after two rows of 3 images - displayed as the following:

First row = 3 images Second row = 3 images Third row = 1 image Fourth row = 3 images Fifth row = 1 image Sixth row = 3 images Seventh row = 1 image and so on.

How can I bring the 3 images in one consistent row?

Help is highly appreciated !!!

Idan Melamed
Idan Melamed
16,285 Points

Hi,

Can you include your html and css codes so we can try to find out the problem together?

3 Answers

Shane Oliver
Shane Oliver
19,977 Points
Shane Oliver
Shane Oliver
19,977 Points

Make sure your % widths are adding up to 100% and add a clearfix to your gallery container since you are floating the items

thimoschroeder
thimoschroeder
23,470 Points

Thanks for your comment, I just tried this, however it still remains in the same format. Maybe I didn't apply your suggestion correctly. Can you check the code below and write in code your suggestion? Your answer is highly appreciated !

thimoschroeder
thimoschroeder
23,470 Points
thimoschroeder
thimoschroeder
23,470 Points

HTML - code /* The HTML code might look a lot, since I displayed 12 images*/

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/interactions.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="HandheldFriendly" content="True"> <meta name="robots" content="noodp"> </head> <body> <header> <a href="index.html" id="logo"> <h1><img src="img/GOPlogoweb.png" alt="GOP logo" class="GOPlogo"></h1> <h2>Sample </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> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li>
<li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li>
<li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"> </form> </li> </ul> </section>
<footer> <a href="http://twitter.com/"><img src="img/twitter-128.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://www.facebook.com/"><img src="img/facebook01.png" alt="Facebook Logo" class="social-icon"></a> <a href="http://www.instagram.com/"><img src="img/Instagram-icon.png" alt="Instagram Logo" class="social-icon"></a> <p>© 2016 Sample .</p> </footer> </div> </body> </html>

CSS - code:

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

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

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0;

}

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

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Lato', sans-serif;
margin: 15px 0; font-size: 1.75em; font-weight: 800; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: 300; }

.GOPlogo { margin-left: -20px; margin-bottom: -13px; }

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

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

}

nav ul { list-style: none; margin: 0 10px; 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; }

footer p { color: #101; }

/*********************************** 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.75em; color: #101; text-align: center;

}

/*********************************** PAGE: ABOUT ************************************/

.profile-photo { display: inline-block; max-width: 150px; margin: 0 auto 30px; max-width: 70%; border: 5px solid grey;

}

colors {

color: #101; line-height: 1.6em;

}

/*********************************** PAGE: CONTACT ************************************/

.contact-info { list-style: none; padding: 0; margin-top: 0; font-size: 0.9em;

}

.contact-info li.phone a { background-image: url('..'/img/phone.png)

}

.contact-info li.mail a { background-image: url('..'/img/mail.png)

}

.contact-info li.twitter a { background-image: url('..'/img/twitter.png)

}

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px;

}

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

gallery{

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

gallery li {

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

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

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

/* blue header */ header { background: #3473b2; border-color: #3473b2; }

/* nav background on mobile */ nav { background: #808080; }

/* logo text */ h1, h2 { color: #fff; font-family: 'Varela Round', sans-serif;

}

/* links */ a { color: #101; }

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

/* selected nav link */ nav a.selected, nav a:hover { color: #101; }

/* CSS selector*/

.styled-select { font-size: 0.70em; text-align: center; }

.textsize { width: 85px;

}

.button { width: 36px;

}

color {

color: #101; line-height: 1.6em;

}

Idan Melamed

Mark Pryce
Mark Pryce
8,804 Points

Could you wrap your code in 3 back-ticks ``` so it formats and it is easy for us to read.

Use the cheatsheet for reference on how to do it you can find it below the answer textarea:)

thimoschroeder
thimoschroeder
23,470 Points
thimoschroeder
thimoschroeder
23,470 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/interactions.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="HandheldFriendly" content="True"> <meta name="robots" content="noodp"></head> <body> <header> <a href="index.html" id="logo"> <h1><img src="img/GOPlogoweb.png" alt="GOP logo" class="GOPlogo"></h1> <h2>Sample </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> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> <li> <img src="img/numbers-01.jpg" alt="" class="interactions"> <form name="deviceselect" class="styled-select"> <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="textsize"> <option selected="selected">-- Select --</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> <option value="#">D</option> <option value="#">E</option> </select> <input type="submit" id="submit" value="$ 2.99" class="buttons"></form> </li> </ul> </section> <footer> <a href="http://twitter.com/"><img src="img/twitter-128.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://www.facebook.com/"><img src="img/facebook01.png" alt="Facebook Logo" class="social-icon"></a> <a href="http://www.instagram.com/"><img src="img/Instagram-icon.png" alt="Instagram Logo" class="social-icon"></a> <p>© 2016 Sample .</p> </footer> </div> </body> </html>

CSS - code:

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

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

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0;

}

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

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Lato', sans-serif;
margin: 15px 0; font-size: 1.75em; font-weight: 800; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: 300; }

.GOPlogo { margin-left: -20px; margin-bottom: -13px; }

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

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

}

nav ul { list-style: none; margin: 0 10px; 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; }

footer p { color: #101; }

/*********************************** 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.75em; color: #101; text-align: center;

}

/*********************************** PAGE: ABOUT ************************************/

.profile-photo { display: inline-block; max-width: 150px; margin: 0 auto 30px; max-width: 70%; border: 5px solid grey;

}

colors {

color: #101; line-height: 1.6em;

}

/*********************************** PAGE: CONTACT ************************************/

.contact-info { list-style: none; padding: 0; margin-top: 0; font-size: 0.9em;

}

.contact-info li.phone a { background-image: url('..'/img/phone.png)

}

.contact-info li.mail a { background-image: url('..'/img/mail.png)

}

.contact-info li.twitter a { background-image: url('..'/img/twitter.png)

}

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px;

}

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

gallery{

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

gallery li {

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

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

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

/* blue header */ header { background: #3473b2; border-color: #3473b2; }

/* nav background on mobile */ nav { background: #808080; }

/* logo text */ h1, h2 { color: #fff; font-family: 'Varela Round', sans-serif;

}

/* links */ a { color: #101; }

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

/* selected nav link */ nav a.selected, nav a:hover { color: #101; }

/* CSS selector*/

.styled-select { font-size: 0.70em; text-align: center; }

.textsize { width: 85px;

}

.button { width: 36px;

}

color {

color: #101; line-height: 1.6em;

}

Mark Pryce - Thanks for the hint !!