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
Armando Pavon
3,878 PointsThe page is not displaying 2 columns only one for the #gallery li elements. the float: left is not wrapping.
The page is not displaying 2 columns only one for the #gallery li elements. the float: left is not wrapping the elements of the list to the left.
1 Answer
Steve North
3,633 PointsI'd strongly recommend giving this link a read: https://css-tricks.com/box-sizing/
Because you have set 50% width on both boxes, the margin applied does not count in the overall width of your boxes. Therefore, the box to the right is being forced under the box on the left because there's not enough space to give both 50% width as well as margin. If you remove the margin, that should give you your boxes perfectly aligned. You may want to swap margin for padding instead and give the above link a quick read into the box sizing and how that may help.
Good luck.
Armando Pavon
3,878 PointsSet the margin to 0 rather than 2.5% and its working now. Thanks.
Armando Pavon
3,878 PointsArmando Pavon
3,878 PointsThis is the code:
gallery{
list-style:none; margin: 0;
padding: 0;
}
gallery li {
float: left; width: 50%; margin: 2.5%; background-color:#f5f5f5; color: #bdc3c7; display:inline-block; /*Tried without this as well */ }
HTML
<div id="wrapper"> <section> <ul id="gallery"> <li> <a ref="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Color image.</p> </a> </li> <li> <a ref="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Blending Modes.</p> </a> </li> <li> <a ref="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Another glowing image.</p> </a> </li> <li> <a ref="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Another glowing image.</p> </a> </li> <li> <a ref="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Anoter description.</p> </a> </li> </ul>