1

I have below code snippet and problem is background color is not extending when I scroll horizontally. 

<section>
<h2>Overview
</h2>
....
</section>

CSS

section h2{
    background:none repeat fixed 0 0 #A35A00;
    width:100%;
}
section{
    width:150px;
    height:100px;
    overflow:auto;
}

Here is the link http://jsfiddle.net/crmouli/uxuTC/

any idea, how to make it extend?

NOTE: I don't want to set the fixed with on header. And here is the example http://jsfiddle.net/crmouli/uxuTC/8/ try to resize the view port so that overview section will get a scroll and then if you scroll to left most then header will not extend to 100%.

Mouli
  • 41
  • 3
  • 1
    The problem is that you're setting a fixed with of 150px on `section`, and since `section h2` has a width of 100%, it then inherits a width of 150px no matter what. Do you really need to use `overflow: auto;`? – Bob Shannon Mar 18 '14 at 07:29
  • I don't want to set the fixed width. Here is the better example which describes my problem. http://jsfiddle.net/crmouli/uxuTC/8/ if you resize the window and scroll appears and header background will not extend – Mouli Mar 18 '14 at 07:56
  • See http://stackoverflow.com/questions/8409613/how-can-i-include-the-width-of-overflow-auto-scrollbars-in-a-dynamically-siz – Bob Shannon Mar 18 '14 at 08:12

0 Answers0