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

Posted by India Abraham
India Abraham
2,826 Points

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

Jared Gibson
Jared Gibson
17,091 Points
Jared Gibson
Jared Gibson
17,091 Points

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.

India Abraham
India Abraham
2,826 Points

How would I go about doing this exactly?

Jared Gibson
Jared Gibson
17,091 Points
Jared Gibson
Jared Gibson
17,091 Points

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.

India Abraham
India Abraham
2,826 Points

that didn't solve my problem

Jared Gibson
Jared Gibson
17,091 Points

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.

India Abraham
India Abraham
2,826 Points 
    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.
Jared Gibson
Jared Gibson
17,091 Points
Jared Gibson
Jared Gibson
17,091 Points

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?