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

Jonathan Tuala
Jonathan Tuala
10,558 Points
Posted by Jonathan Tuala
Jonathan Tuala
10,558 Points

Styling not being applied to divs

Hi everybody! I was practicing special CSS selectors, but I found a problem with my styling. It is being applied to the h5 heading, but not to the columns within the "two_column_layout" div. I posted just the relevant code. (I hope I'm doing the markdown correctly.) What am I doing wrong??

HTML:

      <div class="journal_entry">
        <h5 style="font-size: 1.25em; text-align: center;">Special Selectors Practice</h5>
          <div class="two_column_layout">
            <p>Here is me practicing special CSS selectors and columns. Click on the following links to highlight the corresponding areas in the second column.</p>
            <ul>
              <li><a href="#element-1">Click here to highlight Element 1.</a></li>
              <li><a href="#element-2">Click here to highlight Element 2.</a></li>
              <li><a href="#element-3">Click here to highlight Element 3.</a></li>
            </ul>
          </div>
          <div class="two_column_layout">
            <p>Elements:</p>
            <div style="padding: 5px;">
            <p id="element-1">Element 1</p>
            <p id="element-2">Element 2</p>
            <p id="element-3">Element 3</p>
          </div>
          </div>
      </div>

CSS:

.journal_entry {
    margin: 1px 0 10px 0;
    padding: 5px;
    border-style: solid;
    border-width: 0 0 2px 0;
    background: url(background.jpg);
    box-shadow: 3px 3px 2px;
}

.two_column_layout {
  float: left;
  width: 45%;
  padding: 15px;
}

:target {
  background: #384047;
  color: white;
}

Just to give you a visual idea, I want the background to be applied to my columns as well as the headline.

http://imgur.com/a/FyBA2

3 Answers

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

Your selectors works fine, but because you use Float: left :) the height of "two_column_layout" collapse" (so you don't see any BG color).

Treehouse

stackoverflow

You could insert a div that clears the floates after the last child.

<div class="journal_entry">
          <div class="two_column_layout">
          </div>
          <div class="two_column_layout">
          </div>
         <div style="clear:both"></div>
      </div>
</div>
Jonathan Tuala
Jonathan Tuala
10,558 Points
Jonathan Tuala
Jonathan Tuala
10,558 Points

OHHH, okay! I was still a little fuzzy on the concepts of this particular lesson before moving on. I tried inserting a <div style:"clear:both;">, but it didn't work. However, journal_entry{overflow: hidden;} from stackoverflow did! Any particular reason?

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

You have more than one way to solve this issue. Anyway also "clear:both: Works fine.

Jonathan Tuala
Jonathan Tuala
10,558 Points
Jonathan Tuala
Jonathan Tuala
10,558 Points

Oops, you're right, the div with clear worked, I just had a typo. Thanks so much for your help!!

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

Also one more FLEX / Dry way is to create this clearfix class (instead of adding empty divs) http://cssmojo.com/the-very-latest-clearfix-reloaded/

In your case add this class to the parent item and add this class to you css:

<div class="journal_entry clearfix">

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}