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

Armando Pavon
Armando Pavon
3,878 Points

The 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.

Armando Pavon
Armando Pavon
3,878 Points

This 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>

1 Answer

Steve North
Steve North
3,633 Points

I'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
Armando Pavon
3,878 Points

Set the margin to 0 rather than 2.5% and its working now. Thanks.