The above problem can be solved using css. Below is the css code I added to the style.css file of the twenty-eleven theme. An example of what this looks like with a little extra css to style theorems, examples, etc… click here
.entry-content {
padding: 0!important;
}
/* Singular */
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 100%;
}
/* Textbook */
.textbook {
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 250px;
padding-left: 3px;
}
.textbook-left {
padding-right: 5px;
margin-left: -250px;
float: left;
}
/* =Responsive Structure
———————————————– */
@media (max-width: 800px) {
.textbook-left {
float: none;
margin-left: 0;
}
}
@media (max-width: 650px) {
.textbook-left {
float: none;
margin-left: 0;
}
}
@media (max-width: 450px) {
.textbook-left {
float: none;
margin-left: 0;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.textbook-left {
float: none;
margin-left: 0;
}
}