I have a two column layout (using the CSS multi-column layout module) and I'd like to have an image at the top of the second column. It seems like I have to place the image myself so that it's in the place in the text where the break will be.
The problem is I want the columns to be evenly filled as well.
Is there any way to solve this without JavaScript? This uses a div instead of an image but the idea is to place the red block at the top of its column.
.col-2 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
width:800px;
}
.block {
width:100%;
height:100px;
background-color:red;
}
<div class="col-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit neque sed eros posuere molestie. Quisque mattis ante ac mauris iaculis semper vehicula nibh condimentum. Pellentesque scelerisque euismod metus a sodales. Praesent dolor nisl, consectetur at tincidunt eu, dapibus at orci. Etiam congue metus id sapien rutrum euismod. Proin porttitor rhoncus hendrerit. Phasellus pellentesque venenatis felis a eleifend. Suspendisse pretium placerat hendrerit. Praesent tempus risus in ligula condimentum egestas. Vivamus vitae nunc massa, luctus egestas lectus. Vivamus at turpis sed nisl molestie vulputate. Vivamus nec tortor et ante consectetur dignissim ac in odio. Cras et nisl non enim congue scelerisque. Curabitur in condimentum eros. Curabitur vehicula augue id neque dignissim vitae venenatis nisi feugiat.
Curabitur tristique ullamcorper neque, ac sodales eros suscipit eu. Nulla pretium accumsan lacus, non fermentum felis lacinia mattis. Sed quis turpis eros. Nullam ut turpis libero. Nam quis magna ac tortor elementum pulvinar. Quisque rutrum eleifend elit, eget consectetur nulla dapibus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean rhoncus commodo tellus, sit amet pulvinar mi vehicula non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mollis dignissim felis, et posuere quam molestie nec. Duis sit amet pulvinar dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lorem justo, lobortis id imperdiet nec, lobortis varius mauris. Nullam sit amet nulla arcu. Nullam ornare posuere leo vitae rhoncus.
Sed venenatis dui sapien. Praesent sed enim lacus, vitae venenatis metus. Aenean bibendum nibh a risus scelerisque blandit. Maecenas nibh enim, pulvinar in interdum quis, rhoncus ut orci. Vestibulum a ullamcorper ante. Nulla facilisi. Pellentesque placerat ullamcorper diam at mattis. Aliquam posuere suscipit metus sed sollicitudin. Phasellus in quam odio, ac scelerisque purus. Morbi at nunc odio, nec aliquam urna. Proin mi orci, varius vitae dapibus ac, consequat id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a dui lectus, ut congue nunc. Cras diam tortor, auctor in vehicula vitae, egestas eget neque. In nisi odio, laoreet a convallis in, varius at risus.
<div class="block"></div>
</div>
The CSS3 spec has a "column-break" style, but it has only been implemented in Webkit. It would do exactly what you are looking for, but only in Safari and Chrome sadly.
You would need to have your column breaking element fall within the normal flow of your content, and add the following style:
div.block {
width: 100px; /* this shouldn't be more than your column width */
height: 100px;
-webkit-column-break-before: always;
}
Example (View in Safari/Chrome)
http://css-infos.net/property/-webkit-column-break-before
http://www.w3.org/TR/css3-multicol/#column-breaks
You can wrap the two divs in another div and have the .block div before the .col-2 div in your markup.
Example for you here.
If I understand what you are trying to do (make the div or image span the full with of all the columns) the way to do this with CSS is to specify column-span: all; on the element (img or div) you want to span across the full width. This is currently only supported in Opera however, and only in an internal build (hopefully we will have a public release with it included soon).
Without using column-span you will have to rely on script or move the mark up to be outside of the element you apply column-count on.
Related
I'm sure that this question has been answered before but I just can't find an answer, I have a page with one main div where all the content is housed in it. I have centered it using this:
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Which works fine when the div's height isnt larger then that of the viewport, but when it is it moves half of the content of screen. This can be easly demonstrated on mobile (see picture)
I would solve this by only applying transform on desktop but then if if the div's height where to increase the problem would reoccur. Or using some JavaScript I could check if the div's height is below that of the view port and then transform but I would prefer to keep it CSS only. How could I solve this?
You can use flexbox + margin tricks:
html,
body {
height: 100%;
}
body {
display: flex;
margin: 0;
}
.center {
max-width: 50%;
margin: auto;
}
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec mi maximus, pretium nunc eget, congue nulla. Nam ornare ornare nisl accumsan suscipit. Quisque blandit tortor ac placerat lobortis. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Ut varius a neque a venenatis. Morbi non justo dapibus, bibendum nunc vel, tempus nulla. Nam ornare, sem nec volutpat tincidunt, arcu arcu facilisis nisi, ut lobortis metus ante quis orci. In velit velit, pellentesque
nec suscipit non, euismod nec metus. Cras pulvinar eu nisl at convallis. Nam vehicula interdum dui, sit amet vestibulum sapien consectetur id. Morbi non velit eros. Fusce ac pretium massa. Nam sit amet nibh ac magna bibendum porta. In maximus tempus
nulla. Sed a massa ligula. Vestibulum viverra odio quis ex consequat semper. Vestibulum ex lectus, pellentesque sed quam eget, porta volutpat magna. Praesent pulvinar auctor ante, eget dictum tortor egestas non. Donec maximus sem eu nisl commodo, quis
varius lectus suscipit. In vestibulum est diam, id ornare lacus fermentum a. Fusce dictum ligula eros, non pellentesque lorem pulvinar consectetur. Nunc sapien metus, feugiat ac sagittis sed, euismod sed purus. Curabitur quis iaculis lacus, dapibus
ultrices leo. Curabitur ac lacinia purus. Pellentesque accumsan pulvinar erat non viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In venenatis porttitor erat non eleifend. In eget auctor nulla.
Aenean ultricies dapibus nisi eget venenatis.
</div>
I suggest you to add a margin-top and a margin-bottom to your div : on desktop, t will change nothing, but on a mobile device, your div's height will be shorter.
Strange. Very strange. So I've got a paragraph of Lorem Ipsum in a XML file:
<?xml version="1.0" encoding="UTF-8"?>
<post>
<title>Test</title>
<content>Some test content<br/><br/><br/>TestTest Test.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eu magna bibendum dictum. Pellentesque interdum mi ac imperdiet tristique. Phasellus nec sapien elit. Donec convallis ante non vestibulum ultrices. Quisque ullamcorper est lectus, a sollicitudin sapien faucibus ac. Nam gravida rhoncus elementum. Nullam et velit dapibus, dignissim sem sit amet, luctus magna. Cras mollis eros dapibus, imperdiet purus convallis, dictum magna. Aliquam nisl lacus, venenatis vel lacinia quis, finibus at est. Nulla maximus sed enim in pretium. Fusce eu placerat dui. Curabitur mi magna, malesuada efficitur tellus sit amet, rutrum tristique erat. Phasellus sit amet orci purus. Pellentesque congue orci a tincidunt condimentum. Nullam semper, metus a tincidunt pulvinar, felis nibh faucibus mauris, a ultricies mauris tortor vitae sem. Praesent sed aliquet mauris.
Pellentesque odio lorem, dictum sed ipsum eget, viverra luctus libero. In tincidunt nisl eu nunc elementum, ut facilisis massa volutpat. In enim nibh, gravida vitae tempus eget, semper at orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Duis mattis tellus id lacus tempor tempus. Proin posuere leo quis neque imperdiet, sit amet facilisis lectus consectetur. Ut quam velit, elementum vel ultrices in, consectetur vel arcu. Praesent enim risus, fermentum vitae eros quis, dignissim convallis ligula. Vestibulum ultrices tempus diam id dapibus.
Quisque vel elit diam. Vivamus sed rhoncus nunc, id tincidunt augue. Vivamus et cursus mauris. Etiam finibus, risus accumsan pulvinar facilisis, ex erat vulputate nunc, sit amet elementum velit augue ut arcu. Etiam quis pretium urna, a rutrum ex. In lacinia metus nec urna pellentesque, sed accumsan nisi imperdiet. Phasellus porttitor porttitor lacus, nec aliquam magna scelerisque quis. Nullam auctor diam nisl, sed accumsan nisi ullamcorper ut. Sed nec ligula neque. Maecenas enim est, pharetra sit amet pulvinar nec, varius at tellus. In convallis tincidunt ex eu porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec luctus ex, et ultrices turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Fusce aliquet aliquet turpis, volutpat tristique lacus euismod id. Maecenas eu tortor eget tellus sodales fringilla. Sed ultricies ante eu consectetur luctus. Ut lobortis ullamcorper lacinia. Nam mattis felis ullamcorper leo ornare finibus. In quis commodo ligula. Nulla auctor purus maximus massa suscipit, at hendrerit arcu congue. Proin tincidunt porttitor quam, ut scelerisque urna feugiat sit amet. Donec mollis magna auctor finibus faucibus. Fusce fermentum ornare lobortis. Ut a eros a enim laoreet venenatis. Etiam eget elementum tortor. Nulla in risus eu erat ullamcorper pellentesque.
Nunc ac tincidunt massa, at vestibulum mi. Fusce iaculis, sem sed dictum volutpat, felis orci faucibus urna, vel imperdiet neque quam at tortor. Praesent porta arcu auctor, auctor massa sit amet, pretium eros. Nullam ligula neque, faucibus varius nulla et, dictum commodo dui. Nullam tempor accumsan malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in sodales odio. Cras posuere sagittis sem. Proin non augue vitae tortor vulputate imperdiet. Aenean tincidunt, leo at rhoncus lacinia, urna neque placerat mi, vitae dapibus mauris nibh at quam. Aenean in cursus ipsum, sed varius nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque suscipit lacus. Aliquam erat volutpat. Nulla scelerisque, ligula quis porta dapibus, mi lacus fermentum justo, eget pulvinar odio mauris non sem.
</content>
<date>April 1st 2015</date>
</post>
And this gets centered (along with the title "Test") To the center of the page, with text-align:0 along the margin stuff, and left:0 and right:0.
Here's the jsfiddle of the big text:
http://jsfiddle.net/6k5szuf0/embedded/result
And here's the jsfiddle of it not working
http://jsfiddle.net/6k5szuf0/1/embedded/result
Keep in mind, all I changed was the <content>.
You need to use text-align in #content div:
#content {
margin-top:20px;
position:absolute;
top:100%;
text-align: center;
width: 100%;/*also set it's width when you use absolute position*/
}
Here's the result.
Also a side note: you don't need to use:
.center {
text-align:center;
left: 0;
right: 0;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
.post_content {
left: 0;
right: 0;
}
Notice: When you use left, right, bottom, or top you need to define the position, without setting the position explicitly to relative, absolute or fixed the values won't work as it would be in static position and in static position can't define those values.
I'm trying to build an approximation of something like the Google Docs editor where text that user edits can flow from page to page, vertically, like this:
My best idea for how to do something like this, up until now, has been to continually measure the size of the content in a page's container, and if it exceeds the size allotted to the page, programmatically move pieces of text to the 2nd page until the content in the 1st page fits again.
Short of building a Google Docs-like layout engine (a la traditional word processors), I haven't come up with anything better, but then I stumbled across -webkit-column-gap (obviously will only work on WebKit, I'm okay with that at the moment).
Using -webkit-column-gap, I'm able to flow text from column to column; if I put the text in a contenteditable div, it almost approaches the effect I'm looking for - as I type more, content automatically flows from "page" to "page", except the "pages" are all side-by-side in columns, like this:
Here's the HTML I'm using for this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lorem ipsum dolor sit amet</title>
<meta charset="utf-8"></meta>
<link rel="stylesheet" href="book.css" type="text/css"/>
</head>
<body>
<div class="body">
<div class="content" contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum tempor suscipit. Donec nec mauris leo, in blandit lacus. Nunc a condimentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sagittis porta leo fermentum faucibus. Ut porta, sem sit amet placerat interdum, odio enim ornare nisi, vitae rhoncus lacus erat quis leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc accumsan iaculis nisi, et lacinia turpis fringilla eu. Aliquam adipiscing posuere dui. Integer vel nulla purus. Praesent at eros leo, at facilisis augue. Aliquam aliquam vulputate lacinia. Cras vel leo urna, sed commodo augue. Nullam fringilla eleifend augue ac tincidunt. Maecenas quis velit tortor, sit amet tempor quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam tortor, ornare nec rutrum at, eleifend sed odio. Nam dignissim erat a velit interdum a egestas enim ullamcorper. Nulla sit amet massa quis metus congue tincidunt id vitae felis. Praesent at odio a ante molestie viverra. Aenean fringilla nisi sed urna sodales feugiat aliquet diam vehicula. Aliquam erat volutpat. Vivamus facilisis ultricies est nec consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ac consectetur mi. Vestibulum volutpat rutrum urna, eu vestibulum sem posuere in. Cras volutpat lacinia lorem, vitae commodo quam congue a. Praesent vestibulum placerat nisi ac bibendum. Aenean nec urna quam, id dapibus neque. Quisque elit tellus, condimentum sed semper quis, vulputate a mi.</p>
<p>Sed ac turpis sed felis condimentum sodales. Nulla facilisi. Vivamus porttitor scelerisque vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas pellentesque rutrum eleifend. Suspendisse potenti. Sed sed lacus nec velit lobortis pellentesque. Suspendisse in neque lacus. Proin vel risus ullamcorper orci condimentum convallis. Duis quis lectus eu nibh bibendum feugiat. Etiam dapibus dapibus nisl ut interdum. Pellentesque sollicitudin sollicitudin dapibus.</p>
<p>Nam interdum lobortis augue eleifend suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pharetra, orci vitae luctus pretium, lectus purus blandit magna, a viverra sapien metus quis libero. Morbi scelerisque sem sed turpis gravida ultricies. Mauris in fringilla risus. Sed non enim vel ipsum aliquet consequat non ut metus. Ut tincidunt ante eget est pretium lobortis tempor erat interdum. Proin faucibus justo odio, sed accumsan erat. Fusce ac risus lacus.</p>
<p>Etiam condimentum, ligula nec lobortis commodo, lectus sem ultrices ante, vel eleifend lacus tortor eu felis. Vivamus euismod imperdiet libero, sed blandit magna faucibus id. Nulla auctor venenatis suscipit. Integer massa nisi, eleifend nec tincidunt id, aliquam nec metus. Nam ac elit vitae mauris condimentum viverra. Proin pharetra facilisis odio ac facilisis. Pellentesque et nisi malesuada justo pellentesque aliquam ut nec purus. Sed iaculis, nibh at ultricies euismod, turpis magna vulputate libero, non pretium tellus erat ut justo. Sed placerat mattis neque, a tempus purus aliquam in. Sed egestas dapibus magna. Quisque iaculis dictum mauris, non iaculis massa lacinia sit amet. Proin congue quam sed augue mollis volutpat. Morbi velit libero, venenatis ut commodo vel, mollis ut erat.</p>
</div>
</div>
</body>
</html>
and the CSS:
html {
padding: 0px;
height: 400px;
-webkit-column-gap: 0px;
-webkit-column-width: 200px;
}
p {
text-align: justify;
}
Now this is all well and good, but what I'd really like is for the "pages" to stack vertically, like the Google Docs example above.
Any thoughts on how to do this?
First of all, the column-gap property is a standard CSS feature (from CSS Multi-column layout spec), which works across all modern browsers. You just need to use the version without the -webkit- prefix for IE and Opera, and -moz- prefix for Firefox.
However, there is no feature in the multi-column spec for pages. There is a paged media specification, which would do what you want, but it only works for print and print preview.
Opera has a proposal for paging outside of print, which works well with multi-column. This uses the #paged at-rule and the paged-x, paged-x-controls paged-y, or paged-y-controls values on the overflow property. However, the pages are more like that of the iPad, where there are paging control to go to the next/previous page, such as by swiping or pressing a button. This currently only works in Opera. See this demonstration and explanation.
You could use CSS Regions to achieve what you are looking for, but it currently only works in IE10 (and requires an iframe with that implementation). There is also an experimental WebKit implementation. See the CSS Regions spec and info on the IE10 implementation.
Please reference the following example:
Requirements:
Have one element floated right.
Have another element clear first, and floated left.
Have text flow and wrap all floated elements.
This seems like a dead simple example of using floats in a layout, and yet there seems like no possible way to do it in IE7.
In the given example, IE7 doesn't respect the clear, and both elements float to the top:
<!-- Floated blocks -->
<div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<div style="float:left; clear:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<!-- Wrapping text -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisi tellus. Ut ac iaculis erat. Integer nec turpis mi, quis placerat eros. Donec suscipit eros vel nulla vulputate cursus. Aenean ut augue nisi, a sagittis velit. Mauris eget velit at felis feugiat consequat. Sed interdum lobortis porttitor. Vestibulum ultrices posuere ipsum id posuere.</p>
<p>Nam imperdiet, orci sed faucibus tempus, arcu est pretium mauris, in mollis tellus augue imperdiet elit. Maecenas mi nunc, rhoncus in feugiat et, varius at lacus. Etiam at iaculis libero. Phasellus eu ipsum tortor. Maecenas non purus dolor. Suspendisse risus felis, varius et porttitor eu, ultricies a orci. Nullam ac ipsum diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis suscipit eros consequat sollicitudin. </p>
<p>Morbi facilisis aliquet rutrum. Vestibulum dignissim neque velit. Nunc auctor, ante nec placerat commodo, metus felis dignissim metus, sit amet aliquet sem nisi eget neque. Morbi diam massa, porttitor ac egestas at, bibendum id mauris. Phasellus at leo at est lobortis ullamcorper at vel dolor. Suspendisse tincidunt lobortis quam a luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id metus id mauris rhoncus adipiscing ac quis arcu. Phasellus magna lectus, venenatis non tempor id, euismod ut quam.</p>
<p>Vivamus gravida dui ut dui facilisis ullamcorper. Nulla facilisi. Nunc eu sagittis ante. Fusce sit amet velit vel lacus congue sodales. Integer sollicitudin varius orci. Sed tellus erat, porttitor a ultricies nec, pellentesque nec felis. Sed at arcu ipsum. Etiam lorem leo, egestas et euismod nec, rhoncus dictum mauris. Fusce vestibulum lectus eget magna sollicitudin vulputate pulvinar augue tempus. Integer urna lacus, tincidunt eget fermentum eu, condimentum et eros. Ut vitae tortor porttitor dui elementum sollicitudin nec a ante.</p>
I'm open to ANY solution that enables the intended layout. Thanks--
Since your blocks have a fixed height, you can float a 0 width div with the same height as the div floated to the right.
<div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<div style="float:left; display:block; background:transparent; width:0; height:100px;" > </div>
<div style="float:left; clear:both; display:block; background:#FF0000; width:200px; height:100px;" ></div>
It is not possible I'm afraid :(
see here for lots of test cases that specifically point out where IE7 fails, if there was a solution Bruno would link to it, I'm sure. btw that page leads to another with even more
in short :
clear: both (or the direction) will fail unless the previous float is is the same direction
I've had a look a round and the only solution for some cases is to add an extra element between the floats, but that won't work in your case as it will push the text below the bottom of the inserted element
I can't even think of a way to mimic it with script
EDIT:
I'm not sure if this is exactly what you want, but this looks "OK" in my IE browser:
<p><div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisi tellus. Ut ac iaculis erat. Integer nec turpis mi, quis placerat eros. Donec suscipit eros vel nulla vulputate cursus. Aenean ut augue nisi, a sagittis velit. Mauris eget velit at felis feugiat consequat. Sed interdum lobortis porttitor. Vestibulum ultrices posuere ipsum id posuere.</p>
<div style="float:left; clear:right; display:block; background:#FF0000; width:200px; height:100px;" ></div><p>Nam imperdiet, orci sed faucibus tempus, arcu est pretium mauris, in mollis tellus augue imperdiet elit. Maecenas mi nunc, rhoncus in feugiat et, varius at lacus. Etiam at iaculis libero. Phasellus eu ipsum tortor. Maecenas non purus dolor. Suspendisse risus felis, varius et porttitor eu, ultricies a orci. Nullam ac ipsum diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis suscipit eros consequat sollicitudin. </p>
<p>Morbi facilisis aliquet rutrum. Vestibulum dignissim neque velit. Nunc auctor, ante nec placerat commodo, metus felis dignissim metus, sit amet aliquet sem nisi eget neque. Morbi diam massa, porttitor ac egestas at, bibendum id mauris. Phasellus at leo at est lobortis ullamcorper at vel dolor. Suspendisse tincidunt lobortis quam a luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id metus id mauris rhoncus adipiscing ac quis arcu. Phasellus magna lectus, venenatis non tempor id, euismod ut quam.</p>
<p>Vivamus gravida dui ut dui facilisis ullamcorper. Nulla facilisi. Nunc eu sagittis ante. Fusce sit amet velit vel lacus congue sodales. Integer sollicitudin varius orci. Sed tellus erat, porttitor a ultricies nec, pellentesque nec felis. Sed at arcu ipsum. Etiam lorem leo, egestas et euismod nec, rhoncus dictum mauris. Fusce vestibulum lectus eget magna sollicitudin vulputate pulvinar augue tempus. Integer urna lacus, tincidunt eget fermentum eu, condimentum et eros. Ut vitae tortor porttitor dui elementum sollicitudin nec a ante.</p>
The problem is that the code above is not HTML valid, because you aren't allowed to put a block element inside an inline element. As mentioned above, it's probably not possible to do it on a HTML-valid-way.
I have a pre tag within my page that contains quite a bit of text. When I preview this page in the browser it looks fine. But when I go to print it, everything within the pre tag is printed on a new page. It is like the pre tag is causing a page break.
I am using css to word wrap the text of the pre tag.
Below is a sample. If you preview it in the browser it looks fine, but if you do a print preview you can see how everything in the pre tag is showing up in a new page. Same behavior in both IE7 and FF3.
Any way to make this print correctly?
<html>
<head>
<title>Item</title>
</head>
<body>
<p>Lets put some other stuff here. </p>
<p>Lets put some other stuff here. </p>
<p>Lets put some other stuff here. </p>
<p>Lets put some other stuff here. </p>
<p>Lets put some other stuff here. </p>
<p>Lets put some other stuff here. </p>
<p>Lets put some other stuff here. </p>
<pre style="overflow-x: auto; width:99%; font-size:14px; font-family:Arial; word-wrap: break-word; white-space: -moz-pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet mauris ipsum, eget porttitor neque. Nunc eget eros eget turpis sagittis tincidunt quis vel leo. Praesent pretium, nisi sit amet ornare iaculis, justo nisi imperdiet libero, nec condimentum lacus metus eu diam. Cras eu eros id justo mollis pulvinar eget quis nisl. Proin gravida rutrum semper. Nunc erat lorem, volutpat at venenatis non, egestas eu magna. Vivamus nec lectus a justo hendrerit placerat. Aenean commodo, sem et facilisis sodales, tellus tortor sagittis ipsum, id interdum tortor velit sit amet massa. Maecenas placerat sollicitudin mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse feugiat quam eget erat ornare vel ornare tortor fermentum. Cras at pulvinar turpis. Fusce ut magna eros, ut tristique tortor. Proin pulvinar fermentum massa eu rhoncus. In et sem ante. Sed malesuada dictum ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque enim sapien, pretium eget lacinia sit amet, mattis eget neque.
Fusce ac nibh non arcu varius sodales ac sed massa. Fusce dapibus tincidunt nisl, et semper justo tincidunt nec. Phasellus rutrum hendrerit velit in posuere. Sed quis tempor urna. Aliquam eget nisl massa. Mauris ac erat vitae tortor molestie venenatis eget pretium velit. Curabitur id congue turpis. Quisque nec interdum nulla. In vitae libero a velit vehicula scelerisque vel nec lacus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dictum facilisis neque.
Pellentesque elit ante, suscipit ut suscipit eu, placerat euismod sapien. Integer eu porttitor sapien. Curabitur sit amet elit at metus rutrum laoreet. Sed dignissim, dui vitae scelerisque imperdiet, est purus mattis urna, eget condimentum urna libero at libero. Praesent feugiat, nisl vitae cursus viverra, magna sem luctus ante, scelerisque vestibulum ligula mauris eget turpis. Nullam eget dapibus ante. Vestibulum interdum tincidunt velit, et tempor arcu euismod id. Donec vitae nibh nulla. Nulla quis mi quis nisl iaculis interdum. Aenean tincidunt felis semper orci scelerisque eget vulputate massa suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Mauris tincidunt, est id suscipit porttitor, ipsum massa ultricies nunc, at tincidunt odio tellus quis est. Morbi vel turpis dolor. Mauris id turpis viverra tellus malesuada mattis a consectetur libero. Suspendisse sed turpis nibh. Cras vulputate arcu et risus fermentum fermentum.
Nulla molestie diam consequat nisi mollis viverra. Ut non quam erat, sit amet pellentesque metus. Etiam nec sem id nisl scelerisque tristique. Curabitur molestie nibh aliquam justo sollicitudin sodales. Praesent sit amet nunc lobortis diam dignissim venenatis. Ut ipsum quam, rutrum id tempus at, porttitor eget justo. Nulla non malesuada velit. Duis laoreet mi nec turpis adipiscing lacinia. Duis nec libero massa. Cras elit felis, commodo sit amet tincidunt ut, commodo vitae augue. Nulla vitae magna ut lacus aliquam malesuada quis eu tellus. Maecenas aliquet urna tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Mauris in lorem vel leo tempus eleifend. Nunc augue mauris, pellentesque quis blandit eget, ultricies nec mauris. Nullam posuere laoreet elit, vitae ullamcorper lorem bibendum at. Maecenas aliquet aliquet ligula vitae rhoncus. Curabitur est diam, commodo a porttitor in, imperdiet et lorem. Proin iaculis fringilla tortor sed bibendum. Nullam facilisis mauris et metus interdum tristique. Sed fermentum erat justo, eget rhoncus nibh. Fusce aliquam feugiat leo sodales condimentum. Maecenas tincidunt odio nec dui consequat sit amet dictum felis molestie. Ut id feugiat velit. Maecenas eget lacus at ligula porttitor consequat. Vestibulum ultrices, ante ut ornare hendrerit, metus mauris pellentesque neque, sed sodales diam diam a elit.
</pre>
</body>
</html>
Note
It seems that the line breaks within the code section are not being maintained. So if you copy/paste this code you'll need to add line breaks in order for it to show correctly. I've also copied the file to a server if you want to preview what it should look like: http://www.lakecountyfl.gov/test.htm
Unless you really want the printout to skip all the text which happens to be on a logical line wider than the physical line on paper, you'll be better off to use something other than <pre>:
Take the string from the textbox, wrap its paragraphs into <p>...</p> and then send that to the browser wrapped into a <div>..</div>.
Or, even simpler: Send a <p>...</p> where ... is your sting with the line feeds just replaced by <br /> (or <br>, respectively).
I do not understand this. What is the point in using a <pre> tag when you have the browser do word wrap anyway?