How to change Twenty Eleven sidebar background [closed]

Question

I am trying to change the sidebar background for the Twenty Eleven theme I added this to style.css :

background: #F3F3F3;

under : #secondary { ..... }

but when I smaller the browser in order to test the responsive option , the background color for the sidebar becomes the background color for the content .

any reason why this happens ? http://wp-themes.com/twentyeleven/

Answer 1

To understand what's going on, you need to be familiar with CSS floats and document flow. The main content area #primary is floated left, so it's removed from the document flow. When the sidebar gets pushed below and appears below the content, the #secondary element actually starts at the top of the page, so the background stretches the whole length even though the content it contains starts below #primary. To fix it, you have to set float: none on #primary under @media (max-width: 800px).