Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Unwanted Gaps in Content and Sidebar and Footer Over Flow

Hi,

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!

3 Answers

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.

How would I go about doing this exactly?

I'll try to give a brief example of the code for the left content area:

<div class="grid_8">
   <div class="content_trans grid_12">
   </div>
   <div class="content_trans_a grid_6">
   </div>
   <div class="content_trans_b grid_6">
   </div>
</div>

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.

that didn't solve my problem

Whoops, missed a few things in your style sheet. Here's what I've done so far:

<div class="grid_container new_class grid_8">
   <div class="content_trans grid_12">
      </div>
      <div class="grid_container grid_12"
      <div class="content_trans_a grid_6">
      </div>
      <div class="content_trans_b grid_6">
      </div>
   </div>
</div>

Then remove the background and border radius styles from the content_trans styles, and apply them to a new class that you add to the first div. I believe this should solve the problem. Besides the styling I just mentioned, everything appears laid out correctly in my browser.

    Looks like I'm almost there! If you look at the site now you will see that there is a slight bit of over hang (if the browser isn't expanded to its full-size) causing the white backgrounds not to match up, there is also over flow of the footer into the copyright section.

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?