Question

I’m applying a class to the body when I’ve to add a sidebar because the background image and the size changes. Actually the next code is working fine:

body,html {height:100%;background:url('../img/backend/bg_menu.png') repeat-y;}

body.sidebar {background:url('../img/backend/bg_sidebar.png') repeat-y;}

#container {height:auto;min-height:100%;position:relative;width:100%;}

#sidebar {position:relative;background:blue;float:left;width:100px;}
#sidebar.sidebar {width:350px;}

#content {height:100%;margin-left:110px;}
#content.sidebar {margin-left:360px;}

I want to know if there is any way that just applying a class sidebar to the body I can just let #content and #sidebar without applying class=”sidebar”.

Thank you!

Answer 1

change it to

body,html {height:100%;background:url('../img/backend/bg_menu.png') repeat-y;}

body.sidebar {background:url('../img/backend/bg_sidebar.png') repeat-y;}

#container {height:auto;min-height:100%;position:relative;width:100%;}

#sidebar {position:relative;background:blue;float:left;width:100px;}
body.sidebar #sidebar {width:350px;}

#content {height:100%;margin-left:110px;}
body.sidebar #content {margin-left:360px;}

And you don’t need any more to apply .sidebar to other elements