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

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

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

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

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

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

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;
}