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
Lindsay Barrett
Python Web Development Techdegree Student 7,357 PointsInline-Block Error
I am styling a footer. I have put 4 different elements in the footer and last one keeps dropping to the next line, even though each element is set to 23% and has a display of inline-block.
So why does the 4th element keep dropping to the next line? I thought I could add as much extra padding between elements if the display mode was set to inline-block.
Thanks for your help!
2 Answers
Aaron Loften
12,864 PointsAwesome! Glad it worked Lindsay Barrett! Yeah sure, we can make them larger. A good way to do that would be to remove the width, give each of them a minimum width, if you feel they need it, and then add padding. This may possibly give you more room. If a footer element is smaller, it should make it so that it applies the padding you want rather than excess space.
eg:
if you had a footer items that said the following...
faq contact terms and conditions
You could a pply a minimum width to make sure faq isnt too small, a padding to ensure that the contact and terms and conditions links are both using the same amount of extra space, and it between the inline-block, padding, and min-width, you should be set for proper wrapping as well, assuming you aligned the elements as you wanted them. :)
Happy to help. Let me know if you need more.
Aaron Loften
12,864 PointsHey Lindsay, It looks like your padding is affecting the spacing.
Consider the following css...
footer .wrapper div {
box-sizing: border-box;
}
I think that will help, though you may have to tinker with your footer items afterward.
That css should make it so that your padding is included in the total width rather than added to the width.
Lindsay Barrett
Python Web Development Techdegree Student 7,357 PointsYah! It worked.
Aaron Loften Is there any way to make the widths bigger on the elements, so they look less scrunched. I would like to expand the 4 elements to 30% instead of 25%. The padding is only adding extra space between elements instead of extra width.