Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Adding Pages to a Website Add a New Page

display: inline-block v float: left

In the last lesson we want to position the list items in both the nav and the #gallery in a horizontal line, rather than as block elements. For the nav we use display: inline-block; For the gallery we use float: left; I've tried swapping these declarations and it doesn't have the same effect. Can anyone explain why?

7 Answers

robrravens
robrravens
6,140 Points

Hi Brian,

when changing the #gallery to inline-block I found that for some reason the previous percentages didn't quite work and so the desktop 3 columns was reverted to 2 columns. Changing the CSS in the responsive.css file to the following worked.

 #gallery li {
   float: none;
   display: inline-block;
   width: 27%;   /*28.33333%*/

  }

  #gallery li:nth-child(3n+1) {
  /*  clear: left; */
  }

Note that I've changed the width to 27% just to get it to work - I only tried this in Chrome and admit it did some funky glitch to the images when resized.

Chris Shaffer
Chris Shaffer
12,029 Points

Correct me if I'm wrong, but because responsive.css is the reference stylesheet, shouldn't this actually be overridden in his custom stylesheet?

That is, leave responsive.css alone and instead compensate in his custom code?

Hey Rob and Ryno, Really helpful. Thanks very much. So I gather that you can use inline block in place of float left but you may need to adjust your widths, heights and margins. Probably a good lot more practice needed to fully grasp the different applications. Thanks again

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

np ^^ glad we can help x)

And yes xP

Like shown here:

http://learnlayout.com/inline-block.html

You can actually see the difference ^^

robrravens
robrravens
6,140 Points

Hi Brian,

The change in width is due to inline-block counting spaces in the html code as a 4px margin, and hence throwing out all of the current calculations.

See this link for explantion and some possible workarounds (hacks?) to fix it:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

robrravens
robrravens
6,140 Points

Thanks for those links Ryno, awesome resources :-)

Excellent Rob. Thanks kindly

robrravens
robrravens
6,140 Points

Hi Chris,

Yes you are correct, to change the #gallery for the whole site you only need to make a change in the main.css file, not the responsive.css, like:

#gallery li {
 /* float: left; */
  display: inline-block;
  width: 45%;
  margin: 2.5% -4px 2.5% 2.5%;/*margin: 2.5%;*/
  background-color: #f5f5f5;
  color: #bdc3c7;
}

I was being lazy, only showing a quick and dirty way of testing the desktop 3 column variation - hence why i only made a change to the responsive.css file.

The margin value of -4px is accounting for the additonal margin space created by html when using the inline-block value.

Rob.