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
Unwanted Gaps in Content and Sidebar and Footer Over Flow
Working on my newest site. If you take a look at it here: http://www.cfanla.org/map_site/test.html you will notice that there are gaps between areas of content that should "appear" in the browser as content with an all white background with radial borders. Also, the footer section with the links seems to have overflowed into the copyright section (I'm assuming it's due to the beaks in the content area as noted above). Please help thanks so much!
I would wrap your entire left content area in a single container, and do the same with your sidebar. Apply the styles to each of those, and modify your grid assignments for the new markup. I'm not seeing the issue in the footer in Google Chrome. Not certain if there's a certain breakpoint for it.
I'll try to give a brief example of the code for the left content area:
<div class="content_trans grid_12">
<div class="content_trans_a grid_6">
<div class="content_trans_b grid_6">
Since your grid is percentage based, the conent inside the grid_8 div should take up the appropriate percentages of that container's width. The two secondary content divs may need a smaller grid count to fit with the included margins,but I am not certain.
EDIT: You may also want to change your styles for your content_trans classes, and create a style for the grid_8 div.
I would try making the top div and bottom div span the same number of columns. In my example I intended the content to be moved in the markup to be grouped by left and right, as I assumed you wanted a gutter between the sidebar and main content area. So, in the code you have now, I would recommend changing the grid_8 div for the top wrapper to a grid_12 to match the bottom, or vice versa. I'm not sure what overflow you're referring to for the footer and copyright. Is the background for the copyright section not supposed to be gray?