The "Wonderful" Print CSS

[SamHale]

Hey all,

I am currently creating a Print CSS for a website that I maintain. I am having a problem in removing a margin from a div that I need shown on both screen and print.

The div in my layout.css is:

#sidebar {
float: left;
width: 170px !important;
width /**/:120px;
overflow: hidden;
margin: 0px;
padding: 0px;
}

#content {
position:relative;
width: 520px;
padding:15px 30px 0px 25px;
float:right;
}

So I simply have my menu on the left '170px' wide, and my content for text on the right '520px'.

Now in print.css I have:

#sidebar {
display:none;
}

#content {
position:absolute;
width:100%;
border:0;
margin:0px;
border:0px;
float:left;
}

However, when printing, my content still appears to the right hand side of the page as if the sidebar was still there. So either, my sidebar is still there just not visible, or more likely, my content div in print.css is still picking up the attributes in layout.css.

My css in my page is inserted as:

<link href="../../layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../../print.css" rel="stylesheet" type="text/css" media="print" />

So I can't see why this would happen.

Sorry I can't be any more descriptive or show you an example as this currently isn't live.

If you have any idea's you can offer please do.

Many thanks for your help,
Sam Hale.

 

[Vragabond]

If you have an online example of this, it would be much easier to troubleshoot. Few things to note:
- your printed div still has the padding from the screen, since you haven't redefined that;
- why is your div floated and absolutely positioned when there seems to be no valid reason to do that.