Hi all,
Layout. . .simple header/footer 2 col page using floats.
The problem. . . When i justify the text in the right col it looks fine on screen, but when i print it adds space above. The top line of text is aligning with the bottom of the left float. When i use text-align:left it prints fine but i need the text justified.
The css & html thats causing the prob,
css-
* {margin:0; padding:0}
body {width:100%; font-size:62.5%; background:url(bg_optimized.jpg) repeat-y #e7f9e9; color:#000}
html>body {font-size:10px}
#left {float:left; width:190px}
#right {margin-left:190px; padding:2em; text-align:justify}
#foot {clear:left; margin-top:5em}
html-
<div id="left">
image & vertical links
</div>
<div id="right">
content
</div>
<div id="foot">
footer info
</div>
Thanks for any help
JonDo you know that you can specify a different style sheet for different medias, eg screen, print, mobile etc?Yeah, done that but the sites for a publisher so the print layout needs to be justified. + its bugging me why its doing so.
Just a side note, i use..
<link rel="stylesheet" type="text/css" media="print" href=http://www.webdeveloper.com/forum/archive/index.php/"print.css">
Found different ways of using "media" like @import. still dunno which is best or up to date.If you're having problems in IE-Win, you're probably running into the 3 pixel margin float bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->). Basically, IE-Win adds a 3 pixel margin around floated elements that you can't change. Since your right column butts right up against the left column, text should normally be 3 pixels away from the right edge of the right column.
It seems like justifying the text forces the line to be 100% of it's container's width, thus pushing the right column over 3 pixels, which then makes the right column too wide to fit on the page.
This fix is easy: have the right column margin be at least 3 pixels wider than the left column. Set the right column margin to be the width of the left column, plus the gap you want between the two columns.
#right {
margin-left: 200px; /* #left's width plus a 10 pixel gap. */
}Wow!
been following ur links all day. Loads of great hacks.
Thanks, At least i know whats causing the problem(s)
Had a quik play but printing is still throwing the text down, not sure if i'm using the right hack for the doctype.
Sufering from info overload at the moment, I'll figure it out when it all sinks into place.
I havent tested in others yet, but have found a way that works in ie.
(no margin-left)
#right {float:left; clear:right}
The float gets rid of the 3px jog. Actually whilst playing with the hacks i managed to get a 193px jog.
Silly ie justification stole my margin at the bott of the #left coll.
Without the clear it looks ok on screen but print prob still there..
When i add the clear it seems to be ok. As if ie's telling itself somethings gonna be on the right but it's not there, so lets the justified text stay put.
Thanks again for the help.
Layout. . .simple header/footer 2 col page using floats.
The problem. . . When i justify the text in the right col it looks fine on screen, but when i print it adds space above. The top line of text is aligning with the bottom of the left float. When i use text-align:left it prints fine but i need the text justified.
The css & html thats causing the prob,
css-
* {margin:0; padding:0}
body {width:100%; font-size:62.5%; background:url(bg_optimized.jpg) repeat-y #e7f9e9; color:#000}
html>body {font-size:10px}
#left {float:left; width:190px}
#right {margin-left:190px; padding:2em; text-align:justify}
#foot {clear:left; margin-top:5em}
html-
<div id="left">
image & vertical links
</div>
<div id="right">
content
</div>
<div id="foot">
footer info
</div>
Thanks for any help
JonDo you know that you can specify a different style sheet for different medias, eg screen, print, mobile etc?Yeah, done that but the sites for a publisher so the print layout needs to be justified. + its bugging me why its doing so.
Just a side note, i use..
<link rel="stylesheet" type="text/css" media="print" href=http://www.webdeveloper.com/forum/archive/index.php/"print.css">
Found different ways of using "media" like @import. still dunno which is best or up to date.If you're having problems in IE-Win, you're probably running into the 3 pixel margin float bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->). Basically, IE-Win adds a 3 pixel margin around floated elements that you can't change. Since your right column butts right up against the left column, text should normally be 3 pixels away from the right edge of the right column.
It seems like justifying the text forces the line to be 100% of it's container's width, thus pushing the right column over 3 pixels, which then makes the right column too wide to fit on the page.
This fix is easy: have the right column margin be at least 3 pixels wider than the left column. Set the right column margin to be the width of the left column, plus the gap you want between the two columns.
#right {
margin-left: 200px; /* #left's width plus a 10 pixel gap. */
}Wow!
been following ur links all day. Loads of great hacks.
Thanks, At least i know whats causing the problem(s)
Had a quik play but printing is still throwing the text down, not sure if i'm using the right hack for the doctype.
Sufering from info overload at the moment, I'll figure it out when it all sinks into place.
I havent tested in others yet, but have found a way that works in ie.
(no margin-left)
#right {float:left; clear:right}
The float gets rid of the 3px jog. Actually whilst playing with the hacks i managed to get a 193px jog.
Silly ie justification stole my margin at the bott of the #left coll.
Without the clear it looks ok on screen but print prob still there..
When i add the clear it seems to be ok. As if ie's telling itself somethings gonna be on the right but it's not there, so lets the justified text stay put.
Thanks again for the help.