CSS Background styling does not work when styling elements within a section

Question

I have a section that I want to have a specific background color for. It works fine when I don't style the article element within in, but i 'disappears' when I do. This is the HTML:

<section id="news"> 
    <article> 
        <h3>News Item #1</h3>
        <p>This is a paragraph.</p>
        <a href="#">Read More</a>
    </article>
    <article> 
        <h3>News Item #2</h3>
        <p>Place any important lines</p>
        <a href="#">Read More</a>
    </article>
</section>

So I added this CSS to do change the background:

   #news { 
    background: #5D9B4C;
    max-width: 900px;
    margin-top: 30px;
   }

And it works. However when I try to style the article within the news section, the background color from the whole section goes away.

   #news article  { 
        float: left;
        width: 280px;
        margin-left: 20px;
        margin-bottom: 30px;
    }

Is there a reason why this happens?

Thanks so much in advance.

form3 · Accepted Answer · 2016-07-03T15:20:55.573

1

That's all about floating. There are a lot of techniques to achieve correct result.

Recommend to investigate All About Floats.

For example:

   #news {
     background: #5D9B4C;
     overflow: hidden;
   }
   
   #news article {
     float: left;
     width: 50%;
   }

<section id="news"> 
    <article> 
        <h3>News Item #1</h3>
        <p>This is a paragraph.</p>
        <a href="#">Read More</a>
    </article>
    <article> 
        <h3>News Item #2</h3>
        <p>Place any important lines</p>
        <a href="#">Read More</a>
    </article>
</section>

edited Jul 03 '16 at 15:20

answered Jul 03 '16 at 15:10

form3

127
1
11

perfect! Floating within the section caused it to collapse. Thanks! – Maira Jul 03 '16 at 16:19

score 0 · Answer 2 · answered Jul 03 '16 at 14:54

0

Introduce a Float on the section

http://codepen.io/anon/pen/akwOVE

answered Jul 03 '16 at 14:54

Ramakay

74
6

Hi, that works, however it moves it to the left instead of in the center? Thank you! – Maira Jul 03 '16 at 14:58
Please use width instead of `max-width` and set `margin:0 auto` http://codepen.io/anon/pen/akwOVE – Ramakay Jul 03 '16 at 16:31

score 0 · Answer 3 · answered Jul 03 '16 at 15:16

To float another element is not an solution use clearfix please hope this help and keep i mind when u floated element, parent need to clear children :D

   #news {
     display: inline-block;
     background: #5D9B4C;
     max-width: 900px;
     margin-top: 30px;
   }

  #news:before,
  #news:after {
    content: "";
    display: table;
  } 
  #news:after {
    clear: both;
  }
  #news {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
  }

   #news article {
     float: left;
     width: 280px;
     margin-left: 20px;
     margin-bottom: 30px;
   }

CSS Background styling does not work when styling elements within a section

3 Answers3