CSS Print Width Not Applying

Question

I've been trying to simply make my #content div be 100% width in a print stylesheet. No matter what I try, I just can't seem to get this to work.

A screencap of the visual can be seen here: http://t.co/brgvKPtKxA

The header message goes 100% across--which is interesting, but nothing else.

My CSS looks like:

@media print {

    html, body, #content { width: 100%; padding: 0; margin: 0; display: block; overflow: visible; padding-right: 30px; }
    @page { size: portrait; margin: 1cm; }
    nav, #search, footer, #breadcrumbs, #pull-search, #scroll-to-top, img, #aside { display: none; }

    h1 { font-size: 22pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 14pt; }
    p, ul, ol { font: 10pt/13pt Times New Roman, serif; }
    table { page-break-inside : avoid; }

    header:before {
        display: block;
        content: "Thank you for printing our content at www.schoolcraft.edu. Please check back often for news and updates.";
        border: 1px solid #bbb;
        font-style: italic;
        padding: 3px 5px;
        margin: 0 0 10px 0;
    }

} /* end of print query */

My code is a bit messy because I keep trying new things each second. I've ran into this before, but I have never been this stumped. Any suggestions?

Your time and help is appreciated.

Maria

HTML Code Snippet:

<section id="content">               
<div class="sf_cols">
    <div class="sf_colsOut sf_2cols_1_75" style="width: 76%; ">
        <div id="MainContent_Content_C004_Col00" class="sf_colsIn sf_2cols_1in_75" style="margin: 0px 70px 0px 0px; ">
            <div class='sfContentBlock'>
                <h1>Heading</h1> 
                <p>Maecenas laoreet bibendum nisi, vitae pharetra dolor. Sed id viverra enim, semper tincidunt magna. Curabitur varius nisl vel sapien commodo, id gravida ipsum elementum. Integer dui orci, malesuada eget hendrerit tempor, interdum vel tortor. Phasellus quis leo aliquet, feugiat turpis sed, egestas libero. Duis placerat hendrerit lacus in vulputate. Aliquam tristique, neque vel vehicula eleifend, urna erat imperdiet orci, id pulvinar tellus nisi in quam. Etiam a varius justo. Quisque consectetur commodo velit ac laoreet. Suspendisse aliquet vehicula urna. Vestibulum at justo non nibh placerat aliquet vel a arcu. Morbi at convallis ante. Vivamus in nulla quis mauris ornare tempus. Nam ultrices nisi quis nisi ullamcorper iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.</p>
            </div>
        </div>
    </div>
    <div class="sf_colsOut sf_2cols_2_25" style="width: 24%; ">
        <div id="MainContent_Content_C004_Col01" class="sf_colsIn sf_2cols_2in_25" style="margin: 0px; ">            
        </div>
    </div>
</div>

Answer 1

remove these:

style="width: 76%;"

style="width: 24%;"

and add id:s (id="content_right", id="content_left") for your div:s like this:

<section id="content">               
<div class="sf_cols">
    <div id="content_left" class="sf_colsOut sf_2cols_1_75">
        <div id="MainContent_Content_C004_Col00" class="sf_colsIn sf_2cols_1in_75" style="margin: 0px 70px 0px 0px; ">
            <div class='sfContentBlock'>
                <h1>Heading</h1> 
                <p>Maecenas laoreet bibendum nisi, vitae pharetra dolor. Sed id viverra enim, semper tincidunt magna. Curabitur varius nisl vel sapien commodo, id gravida ipsum elementum. Integer dui orci, malesuada eget hendrerit tempor, interdum vel tortor. Phasellus quis leo aliquet, feugiat turpis sed, egestas libero. Duis placerat hendrerit lacus in vulputate. Aliquam tristique, neque vel vehicula eleifend, urna erat imperdiet orci, id pulvinar tellus nisi in quam. Etiam a varius justo. Quisque consectetur commodo velit ac laoreet. Suspendisse aliquet vehicula urna. Vestibulum at justo non nibh placerat aliquet vel a arcu. Morbi at convallis ante. Vivamus in nulla quis mauris ornare tempus. Nam ultrices nisi quis nisi ullamcorper iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.</p>
            </div>
        </div>
    </div>
    <div id="content_right" class="sf_colsOut sf_2cols_2_25">
        <div id="MainContent_Content_C004_Col01" class="sf_colsIn sf_2cols_2in_25" style="margin: 0px; ">            
        </div>
    </div>
</div>

then add this to your desktop css:

#content_left {
  width: 76%;
}

#content_right {
  width: 24%;
}