CSS and print layout

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I'm having a great struggle trying to format my page for printing.
Specifically getting my divs to appear in the place I want them to.  I have
3 divs: right, list and footer.  When displayed on screen, they appear where
I want them:


But when I print, they appear as


which really mucks everything up.

I've tried every imaginable combination of clear and float but to no avail.

I've been testing on Firefox 1.5, but it looks even more weird in IE6.

Is it even possible to do this when printing or should I revert to layout by

Any help would be greatly appreciated.  I've printed out the contents of the
relevant page here (it's made by PHP and not in a very eye-friendly format).
To recreate it, start at http://www.listyblue.com/main.php click on Create
List then on Format List for Printing.

The CSS:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Listyblue ::: Your List</title>
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

<h1>Listyblue's shopping list</h1>
<div id="right"> <img class="fixedimage" src="/userimages/listyblue.jpg"
alt="mascot image" /> </div>
<div id="list">
up liquid</li><li>Washing powder</li><li>Red
wine</li><li>Beer</li><li>Chocolate</li><li>Take out rubbish</li><li>Do the
washing up</li><li>Buy Grandma present</li><li>Sort out taxes</li><li>Write
to my MP</li><li>Scalextric</li> </ul>
<div class="throwpb"> <h1>Listyblue's shopping list</h1> </div> <!--  
throwpb -->
<ul><li>BMX</li><li>Playstation</li><li>TV</li> </ul>
</div> <!-- list -->
<div id="footer"><hr /><h3><a
href="http://www.listyblue.com/main.php ">www.listyblue.com</a></h3></div>
<!-- footer -->

background: white;
font-family: "Century Gothic", Verdana, Helvetica, sans-serif;
color: #000;

text-align: left;
font-family: "Century Gothic", Verdana, Helvetica, sans-serif;
font-size: 3em;
font-weight: normal;
color: red;
vertical-align: middle;
margin-bottom: 3em;

height: 300px;
width: 200px;
display: inline;
margin-left: auto;
margin-right: 3em;

list-style-image: url('bullet.gif')

background: #777;
float: right;
width: 30%;
padding: 0.5em;
margin-left: 1em;
border: 0;
clear: none;

background: #777;
/*float: left;*/
width: 60%;
margin: 3em 0 5em 3em;
/*clear: right*/

Re: CSS and print layout

The Eclectic Electric wrote:
Quoted text here. Click to load it

Do not see this linking of this print stylesheet in your source...

Take care,


Re: CSS and print layout

Quoted text here. Click to load it

I should have been more clear.  The source in my post is not from
http://www.listyblue.com/main.php but from
http://www.listyblue.com/makelist.php .  But you need to have some content
for the latter to format to see the effect, hence needing to go to main.php

It definitely picks up the print.css as I have a color: ref directive in
their for <h1> and it does turn red in print preview (and the <ul> directive
is processed too).


Site Timeline