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 How to Make a Website Adding Pages to a Website Add a New Page

Posted by Brian Gallagher
Brian Gallagher
9,074 Points

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
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,030 Points
Chris Shaffer
Chris Shaffer
12,030 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?

Brian Gallagher
Brian Gallagher
9,074 Points
Brian Gallagher
Brian Gallagher
9,074 Points

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
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
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
robrravens
robrravens
6,140 Points

Thanks for those links Ryno, awesome resources :-)

Brian Gallagher
Brian Gallagher
9,074 Points
Brian Gallagher
Brian Gallagher
9,074 Points

Excellent Rob. Thanks kindly

robrravens
robrravens
6,140 Points
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.