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 CSS Layout Techniques Display Modes Column Layout with Inline-Block

mrx3
mrx3
8,742 Points

Should we mainly use float based layout for a column based website?

This is the first time I have ever heard of using inline-block as way to layout a column site. Should we primarily use floats as a way to layout a column site? In what instance would you want to use a inline-block to layout a site?

Thanks in advance for any answers.

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

I often use inline-block to layout a navigation left to right rather than on top of each other. It can be very effective when combined with HTML lists. :-)

mrx3
mrx3
8,742 Points

What up Jonathan, how's it going? I also layout my navigation, and list items using inline-block. It is very effective with those two. Have a good one.

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

Well to be honest from my own experiences you can use them interchangeably, however, they both have their weaknesses. Floats require a bit more extra markup and styles to make up for a lot of your content being thrown out of the normal flow and also requires clearfixes that you need to implement correctly. The inline-block way requires a bit more inginuity because I don't believe that it was actually made to create layouts (much like the float actually) but really only changes the way that things are displayed so it may require a bit more math to get your layouts looking right.

Personally I think you should start focusing on learning Flex, it is becoming much more mainstream and will most likely become the way to layout websites in the future.

http://css.maxdesign.com.au/floatutorial/ - floating tutorial http://learnlayout.com/inline-block.html - inline-block https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -flex

mrx3
mrx3
8,742 Points

The only thing I don't like about flex-box is the browser support. There are many browser issues correct, especially with the syntax for older browsers? I could be wrong though. Thank you for the reply, I really appreciate it.

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Browser support for flex is pretty good now, I mean basically it is just the older versions of ie that don't really support it.

Here check this out: http://caniuse.com/#search=flex