0

I have two divs nested inside of a div. I set my background in the outer div but it only applied to the first inner div. I can fix the problem by setting the height of the outer div but then I would have to change the height every time I modify the height of the inner div. My code is below. Any help would be appreciated.

</head>
<style>
 .redgradient{
    background: linear-gradient(#f75d5d,#ed7878   );
}
#intro{
    float: left;
    padding-left: 20px;
    width: 400px;
}
 </style>

<body>
 <div class="container ">
     <div class="redgradient">
          <div >
             <h1>Kendall Ponder's Wonderful Life</h1><p />
          </div>
          <div id="intro">
               Here is some text.
         </div>
    </div>
</body>
</html>
ponder275
  • 903
  • 2
  • 12
  • 33

1 Answers1

1

Just add overflow: hidden; to wrapper div

.redgradient{
    background: linear-gradient(#f75d5d,#ed7878   );
    overflow: hidden;
}

Check this Demo

If you remove the float from #intro then also it works. No need to add 'overflow: hidden;'.

If you want to use floated elements, make sure to clear them properly.

amol
  • 1,535
  • 9
  • 10
  • why does this work? what caused the problem initially? – vijrox Jul 09 '14 at 18:09
  • Its happened due to floated element used inside. `overflow:hidden;` makes it clear. – amol Jul 09 '14 at 18:18
  • Thanks for the help! Would I be better off to avoid float? The class I am taking used float to line elements up. Would overflow:auto also work? Thanks again! – ponder275 Jul 09 '14 at 18:31
  • `overflow:auto` also works but to `clear` the `floated` elements always use `clearfix` method. You can refer this link http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best] – amol Jul 09 '14 at 19:00