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 Responsive Layout

Jonathan Meine
seal-mask
.a{fill-rule:evenodd;}techdegree
Jonathan Meine
Front End Web Development Techdegree Student 10,944 Points
Posted by Jonathan Meine
.a{fill-rule:evenodd;}techdegree
Jonathan Meine
Front End Web Development Techdegree Student 10,944 Points

Requesting assistance with inline-block display two-column layout; Responsive Layout project

Hi - I'm in the process of completing the Front End Development Responsive Layout project. Currently working on mock-up #2 which shows a two-column layout for the portfolio section. I've got everything working correctly in the layout using the inline-block display mode (in lieu of floats), but need to somehow add gutter space between the two columns to more accurately match the mock-up. The only spacing at current is the default spacing that shows up when you use the inline-block mode. I've tried applying css to child image elements in the portfolio, but can't seem to get them sized correctly. Any assistance greatly appreciated!

3 Answers

Jason Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jason Welsh
Treehouse Project Reviewer
Jason Welsh
.a{fill-rule:evenodd;}techdegree seal-36
Jason Welsh
Treehouse Project Reviewer

Hi. If you add 1em of left and right padding to the two columns it should create a perfect gutter. This worked perfectly for me with the inline-block column layout. Hope this helps!

Jonathan Meine
seal-mask
.a{fill-rule:evenodd;}techdegree
Jonathan Meine
Front End Web Development Techdegree Student 10,944 Points
Jonathan Meine
.a{fill-rule:evenodd;}techdegree
Jonathan Meine
Front End Web Development Techdegree Student 10,944 Points

Thanks Jason - much appreciated! I originally avoided adding padding because I didn't also want it on the far left and right sides of the two columns, but found I could live with that if I added a background color over that section that extended out to the margins. So looks like this solution will work for me - again, thanks.

Jason Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jason Welsh
Treehouse Project Reviewer
Jason Welsh
.a{fill-rule:evenodd;}techdegree seal-36
Jason Welsh
Treehouse Project Reviewer

Haha sounds like you are discovering you need to sort of hack your way to get CSS just right sometimes. Glad it isn't just me.

Try just adding padding-right on the left column and padding-left on the right one so there is no padding the the far side of each one?