The short answer is, the way you want to do it, you can’t. It’s not how CSS works. There are some workarounds but they don’t work consistently in all browsers.
To accomplish what you want the way its typically done is to fake the appearance of white in the center going all the way to the bottom using a technique called faux columns. You use a background image to accomplish this.
There is a div in your theme with the id of “wrapper”. You make a special image and set it as the background image on the wrapper div. The image can be 10 or even 1 pixel tall. it should be 770 pixels wide, for your site.
The left 230 pixels (the width of your left column) should be made the blue background color, #b9e6fe
The right 540 pixels are white.
That is the total width of 770 pixels.
Upload the image into your theme’s image folder. You can’t use the media library uploader for that purpose since it puts it in the wrong folder.
let’s say you named the image faux.jpg
Find this on line 32 of your theme’s stylesheet style.css
#wrapper {
background: none;
min-height: 100%;
width: 1000px;
}
change the background line to this:
background: url(images/faux.jpg) repeat-y top left;
That should display the white background color down to the bottom of the content section.
Your center column is 540 pixels wide – that is the part that is white.
Your left column is 230 pixels wide.
Thankyou, that did the job perfectly and has saved me another 5 hours trying to figure it out.
It’s amazing how such simple solutions exist – once you know what they are 🙂
