Related
I'm making a page with some text, but I want to insert an image to the right of the text. I managed to make the text wrap around the image, but it seems I cannot move the image except right and left of the text. I would like to move vertically the image.
And here is my code for the image:
img {
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
}
<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur
lorem. Nam condimentum neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque
varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor
ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl
dapibus non. Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur
non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus
finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor
ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus
lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien.
Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce
lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc,
sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
Could someone help me ?
shape-outside can do it
img {
width: 20%;
height: auto;
margin: 10px;
float: right;
/* use the same value inside margin and shape-outside */
shape-outside: inset(100px 0 0 0);
margin-top: 100px;
}
p {
text-align: justify;
}
<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum
neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi.
Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor ac massa tempus
mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non. Morbi
urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero.
Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare.
Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies
magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus lectus, sagittis
rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat
vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac
nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor
in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
You can move the image down, while still keeping it floated right, by positioning it in amongst the text. However, where it exactly appears in relation to the surrounding text depends on the viewport dimensions i.e. how the text can round it.
img {
position: relative;
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum neque in tempor sollicitudin. <img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png"/>Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo.
Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor.
Aliquam a dolor ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non.
Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur.
Sed semper lacus lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
I've been wondering if this is possible. A block of text surrounding an image. In this case it is circlular. I have been able to nudge text to the side using the shape but not entirely encase it.
I have only managed to find one example and I was unable to recreate it from the example actually given:
I don't know a way of wrapping text around a cicle the way it is done in your mokup. As commented, for a better user experience, the text should be seperated in two paragraphs and wrapped on each side of the circle. In this configuration you can wrap the text around the circle. But beware this solution has very poor browser support.
This approach uses the shape-outside property as shown in this answer and will only work in modern webkit browsers :
DEMO
body{margin:0;padding:20px;width:830px;margin:0 auto;}
p{
width:400px;
margin-right:15px;
text-align:justify;
overflow:hidden;
float:left;
}
p:before{
content:'';
width: 200px;
height: 600px;
}
#left:before{
float:right;
shape-outside: circle(40% at 100% 50%);
}
#right:before{
float:left;
shape-outside: circle(40% at 0 50%);
}
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida. Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus. Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus. Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida. Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus. Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus. Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
I got stuck on need to store a data from multiline textbox to sql server database and write a code like this
ASP.NET
<asp:TextBox ID="txtProductFeatures" runat="server" CssClass="full-width-input" TextMode="multiline" Rows="10"></asp:TextBox>
CODE BEHIND
cmd.Parameters.AddWithValue("#ProductFeatures", txtProductFeatures.Text.Replace("\r\n", "<br />"))
i tried to store lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices luctus semper. Mauris facilisis ac mauris id commodo. Cras non efficitur magna, non sollicitudin erat. Maecenas blandit nisl a est mollis, eu luctus mi euismod. Mauris aliquam lorem nec risus vehicula, vel faucibus ante tincidunt. Sed erat odio, fermentum at nulla ut, fringilla gravida orci. Quisque interdum, massa sed laoreet auctor, ipsum nisi ornare libero, a dignissim risus nunc ac magna. Suspendisse tortor mi, blandit id ipsum ac, mattis finibus metus. Morbi euismod eleifend odio et dictum. In semper sit amet mauris et gravida. Suspendisse vitae pharetra mi, ac posuere tortor. Proin enim nisl, pretium ac ipsum sed, vulputate viverra purus. Aliquam nec est et ante rutrum sollicitudin. Etiam tempor velit erat, non ultricies eros varius vitae. Proin consequat tempor diam, sed imperdiet metus ullamcorper nec. Morbi ut molestie lectus.
In tincidunt egestas odio a luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin aliquam quam feugiat aliquam dictum. Proin massa eros, accumsan vel faucibus eget, commodo quis tortor. Vivamus quam odio, porttitor eu massa eget, tincidunt lobortis libero. Fusce congue ultricies tellus pulvinar sagittis. Aenean quis lectus eu nulla porta iaculis eget et nisi.
Aenean congue diam neque, tempus tincidunt urna consequat ut. Aenean maximus lectus eu tellus molestie, nec auctor est dapibus. Nullam bibendum sed est sed euismod. Nunc consectetur, orci a aliquam condimentum, lectus neque vehicula sem, nec aliquam enim neque sit amet leo. Morbi nulla augue, mollis eget nunc eget, commodo fringilla est. Quisque pretium vehicula tincidunt. Praesent malesuada massa vel erat faucibus, vel tempor sapien fringilla. Aliquam lacinia, sapien ut dictum laoreet, tellus sem sollicitudin justo, volutpat tristique libero risus nec purus. Morbi ornare erat a justo gravida malesuada. Nullam placerat erat nunc, vel aliquet neque massa nunc.
And they're show just
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus ultricies aliquet. Suspendisse nunc tellus, finibus et l
i tried a few trick and code on stack but it doesn't matter
datatype in Database is = NVARCHAR(MAX)
try this
When DataType is NVARCHAR(MAX) You Need to Use -1 as Max Size
cmd.Parameters.Add("#ProductFeatures", SqlDbType.NVarChar,
-1).Value=txtProductFeatures.Text.Replace("\r\n", "<br />");
Read This:
can-we-stop-using-addwithvalue-already
I have encountered the issue described above in a report that I have created and requires printing from within an ASP.NET application.
I have created a simplified version so I could try and find the problem.
Please take a look. Preview the page in the browsers print preview, you will see that the code I have highlighted bold causes the table header to not repeat. Remove the page-break-before and the header should reappear.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#media print
{
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tbody {display: table-row-group; }
}
</style>
</head>
<body>
<div style='margin-left: auto; margin-right: auto; width: 602px; border: 0px solid #000000; padding: 0px 5px 5px 5px; font-size: 10pt; font-family: Tahoma'>
<table style="font-size: 12pt; font-family: verdana">
<thead>
<tr><th align="center">HEADER</th></tr>
</thead>
<tbody>
<tr><td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in tellus ante, eu pharetra neque. Pellentesque a blandit odio. Donec porta sodales arcu vitae commodo. Praesent eu dolor justo. Cras facilisis, tellus sit amet laoreet blandit, libero nibh pharetra lacus, nec sagittis odio tortor quis leo. Quisque rhoncus nisi at urna tempor feugiat. Sed fermentum augue ultricies nunc facilisis vel dignissim ante dapibus. Mauris auctor, lorem sit amet vestibulum ultrices, erat neque fringilla lacus, at laoreet sem risus pulvinar enim. Proin laoreet pellentesque neque, et elementum magna volutpat vitae. Curabitur et nulla velit, ut tincidunt ante. Proin ac nulla sit amet odio rutrum viverra a in nibh. In hac habitasse platea dictumst.
<br /><br />
Pellentesque eu lacus non nisi ornare viverra. Quisque arcu nunc, pretium in feugiat et, tristique venenatis odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc arcu velit, suscipit sit amet porta vel, volutpat id ante. Mauris et nulla dui. Cras elementum posuere euismod. Donec ante dui, molestie non tempus quis, fermentum quis tellus. Proin viverra tellus quis lectus pharetra ut iaculis neque pharetra.
<br /><br />
Sed sed gravida tellus. Etiam pulvinar nibh quis est tempus dapibus eu quis eros. Etiam vel urna nunc. Suspendisse potenti. Aliquam sit amet libero nec neque adipiscing feugiat quis non odio. Fusce malesuada magna et orci egestas eget lacinia erat adipiscing. Proin vitae euismod elit. Cras ut sem nisl. Ut ornare dolor at erat dignissim eu cursus tortor ullamcorper.
<br /><br />
Suspendisse vel odio a elit sagittis porta et vitae justo. Nam quis sodales neque. Donec magna sem, faucibus et semper sit amet, adipiscing sit amet mi. Vestibulum non neque ligula, vitae luctus nulla. Mauris quis libero pulvinar justo iaculis lacinia. Donec gravida eleifend tortor. Maecenas tristique iaculis nunc, eu sagittis dolor interdum et. In hac habitasse platea dictumst.
<br /><br />
Duis orci leo, dapibus vestibulum luctus nec, accumsan tempor dolor. Donec blandit venenatis erat, et volutpat quam hendrerit eu. Suspendisse potenti. Quisque risus nulla, malesuada sed semper ac, molestie nec est. In nec dignissim sem. Nulla enim nunc, eleifend eu fringilla sagittis, pellentesque non urna. Sed mi diam, ullamcorper et accumsan quis, placerat ut nisi. Nunc purus neque, semper non posuere ut, vestibulum vel odio.
<br /><br />
Maecenas aliquam sodales eros, sed faucibus mauris mattis eget. Nulla erat lectus, luctus id fermentum eu, posuere ac tellus. Praesent nisl erat, cursus eu tincidunt congue, viverra rhoncus enim. Pellentesque orci nisi, sagittis vel pretium posuere, pellentesque at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis odio, tincidunt in molestie id, aliquet id magna. Vestibulum sit amet orci eget felis tempus cursus. Nullam aliquet, lacus eget pharetra rhoncus, nisi orci pellentesque felis, id vestibulum mauris turpis aliquet risus. Sed rutrum est non est adipiscing ut dictum odio feugiat. Integer arcu nunc, porta pharetra facilisis ut, congue congue dolor. Quisque metus leo, cursus eget viverra iaculis, sodales eu leo. Vivamus ipsum lorem, fringilla sed sagittis vel, commodo quis lectus. Nunc ornare accumsan diam, ut aliquet purus laoreet sit amet. Pellentesque lacinia ligula quis ipsum dictum quis malesuada turpis semper.
<br /><br />
Duis laoreet auctor nibh a fermentum. Phasellus sapien risus, sodales et mollis in, dictum at nisi. Vestibulum eu nibh nec nulla pretium ornare. Aenean at ipsum orci, a laoreet nisl. In fermentum feugiat eros, sed gravida ipsum porta nec. Suspendisse luctus porta erat sit amet gravida. Nunc in lacus in odio accumsan euismod et a elit. Curabitur bibendum mauris bibendum dolor gravida dapibus. Quisque urna dolor, pulvinar tincidunt posuere dignissim, fringilla vel tortor. Morbi pellentesque sollicitudin eros ac tempus. Aliquam erat volutpat.
<br /><br />
Aliquam erat volutpat. Etiam congue, mi aliquet eleifend consequat, metus eros posuere augue, sed accumsan nunc justo sit amet est. Duis sed felis vel elit scelerisque tristique sit amet quis diam. Fusce ut ultricies odio. Mauris scelerisque placerat tempor. Sed vestibulum mollis velit nec imperdiet. Sed elementum sodales metus, et fermentum leo aliquet auctor. Ut at nisl vitae purus rhoncus aliquam. Sed aliquet libero ac est egestas quis condimentum nisi rutrum. Donec condimentum vehicula odio, eu dignissim neque pulvinar a. Integer lobortis tempus blandit. Nullam faucibus lorem sed mauris consectetur id viverra turpis suscipit.
<br /><br />
Sed id diam neque. Donec elementum, enim sit amet ultrices semper, quam justo fringilla dolor, quis condimentum velit orci vel felis. Duis a elit vel nibh convallis dictum. Nam vel arcu nibh, id pretium orci. Maecenas vel dui nisi, id consequat nibh. Nulla blandit eleifend nunc varius semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut condimentum nibh. Pellentesque sit amet faucibus justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Sed eget leo mauris. Vivamus luctus, felis at aliquet imperdiet, nibh erat auctor lacus, ac dignissim orci neque faucibus sapien. Suspendisse tempus venenatis purus ac facilisis. Aenean ac ultrices arcu.
<br /><br />
Suspendisse posuere, orci eget luctus tristique, odio lectus varius orci, eu mattis erat ante ac risus. Donec dictum pretium leo, eu porta enim dapibus eget. Donec in libero tortor, id tempus libero. Nunc magna tellus, placerat ut adipiscing vitae, volutpat ac arcu. Quisque sit amet leo massa. Nunc cursus, odio nec molestie sollicitudin, leo tellus dictum magna, eu sollicitudin libero ligula ac urna. Morbi ac sapien libero, ut eleifend massa. Etiam a risus vitae ipsum tempus pharetra sit amet vitae erat. Morbi sit amet lorem vulputate magna ultrices tincidunt sed vel urna. Aenean pulvinar, risus quis pharetra tincidunt, purus est accumsan odio, et accumsan turpis massa vitae leo. Vivamus at eros dolor. Donec ornare, nulla ut venenatis adipiscing, purus urna vestibulum nisi, placerat tincidunt nibh tortor vitae arcu. Vestibulum id turpis erat, ut adipiscing lorem. Duis venenatis, magna id lobortis accumsan, velit nisl convallis augue, sit amet interdum urna lorem sit amet sapien. Curabitur facilisis convallis lorem sit amet mollis. In hac habitasse platea dictumst.
<br /><br />
Quisque eget nunc leo. Vivamus rhoncus ultrices dolor in porta. Phasellus condimentum tempor justo nec facilisis. Sed consequat dictum dui, eget lacinia arcu rhoncus eget. Curabitur vehicula laoreet nunc quis tincidunt. Maecenas eget massa sed ligula interdum euismod quis vitae urna. Praesent luctus, dolor a faucibus tristique, purus lorem aliquam lectus, sed hendrerit ante nisl vel ligula.
<br /><br />
**<div style="page-break-before: always">**
Curabitur pulvinar sollicitudin est id elementum. Vestibulum quis lacus nisl. In pretium quam vel diam iaculis sit amet tristique justo viverra. Vestibulum ut magna nibh, quis pulvinar enim. Nulla facilisi. Sed posuere pulvinar urna, a porta odio congue in. Curabitur faucibus turpis quis nibh semper tincidunt. Ut egestas, justo ut vehicula elementum, magna eros sagittis nulla, placerat euismod nibh quam eget quam. Nullam placerat turpis vel lorem pharetra pharetra. Nunc eros nisl, aliquet rutrum sollicitudin et, ultrices volutpat augue. Maecenas dapibus adipiscing mattis. Nulla vitae velit tortor. Proin suscipit, augue in egestas aliquam, massa nisl pharetra mauris, sed vulputate lacus mi sit amet nibh. Donec ut justo tortor, non semper ligula. Nunc facilisis blandit lorem at pulvinar.
</div>
<br /><br />
Integer imperdiet faucibus mattis. Integer condimentum scelerisque erat, sed adipiscing dui condimentum vel. Etiam aliquet tempus neque, in fermentum massa tristique eu. Sed tempus neque vel eros tincidunt eget lobortis massa accumsan. Ut enim elit, rutrum vel adipiscing egestas, gravida nec urna. Proin fringilla aliquet hendrerit. Aenean a porttitor nunc. Ut vestibulum malesuada massa sit amet dictum. Duis ut sem ac augue fermentum tincidunt. Aliquam convallis pellentesque elementum. Suspendisse accumsan, lectus vitae tempus elementum, risus urna lacinia nunc, non dapibus sem nunc sit amet neque. Integer eu metus erat. Donec at ante neque. Nullam convallis odio sit amet enim sollicitudin vel vestibulum turpis aliquam.
<br /><br />
Aenean mattis velit vel ipsum eleifend sit amet auctor metus fringilla. Quisque a lacus orci. Ut luctus vulputate imperdiet. Mauris luctus massa at erat posuere sit amet convallis magna malesuada. Mauris tempus auctor suscipit. Phasellus eu est vel metus pharetra commodo ac posuere orci. Duis massa purus, lobortis et fringilla et, venenatis eget odio. Fusce vel sapien nisl. Suspendisse nisi nisi, tempor ut volutpat vitae, pharetra id ligula. Donec ipsum enim, dignissim et pharetra nec, vehicula et mauris. Ut sit amet nisl odio. Sed eleifend auctor metus, vel laoreet diam varius vel. Vestibulum sit amet augue nec massa faucibus rhoncus. Nulla sodales justo nec nisl commodo facilisis. Aenean euismod tortor eget lorem ultricies tincidunt.
<br /><br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque mi dolor, hendrerit a laoreet vehicula, elementum ut elit. Nullam sodales justo sed turpis volutpat blandit. Mauris augue est, tincidunt at vestibulum vitae, vestibulum non velit. Ut ac bibendum orci. Vestibulum lacus velit, rhoncus sed pellentesque ac, aliquam vitae sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam condimentum nulla lacinia purus luctus et molestie eros cursus. Ut quis erat at magna aliquet laoreet. Suspendisse iaculis hendrerit vulputate.
<br /><br />
Etiam lobortis tortor lectus. Curabitur a ligula lorem. Donec vel odio a urna fermentum tincidunt in in libero. In hac habitasse platea dictumst. Morbi vel dui vitae ligula interdum ultricies in nec nisi. Sed sit amet odio in massa sodales mattis. Nunc non dolor ac turpis laoreet ultrices quis pellentesque felis. In egestas justo sed libero molestie in posuere odio condimentum. Morbi ultrices nibh vitae nisi posuere molestie. Fusce tempor porttitor leo, quis congue turpis congue non. Aliquam lorem libero, lacinia eget egestas nec, consectetur vitae eros. Cras interdum elementum odio, a venenatis odio gravida in. In vestibulum volutpat libero id vehicula. Nulla et vehicula eros. Mauris lacinia leo vitae lectus accumsan dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br /><br />
Vestibulum sollicitudin sollicitudin consectetur. Vivamus fringilla gravida tempus. Phasellus vel fermentum erat. Maecenas auctor euismod lectus et vestibulum. Vivamus fringilla urna et justo rutrum imperdiet. Nunc a diam interdum nulla porta tempor. Nulla tellus risus, dignissim fringilla laoreet ac, lacinia et risus. Aliquam ut est orci, non molestie turpis. Etiam fringilla leo eget felis luctus et blandit nulla porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<br /><br />
In sapien neque, varius at elementum vel, rutrum ut mauris. Phasellus pellentesque facilisis lacinia. Vivamus interdum nibh quis elit vehicula eget faucibus mauris commodo. Donec odio leo, faucibus in pellentesque a, pulvinar vel velit. Phasellus et sagittis felis. Phasellus ultrices elit sed mi tincidunt vel viverra nisl vestibulum. In eu augue nec odio ultrices tempor. Aliquam erat volutpat. Mauris ut urna ligula. Pellentesque tempus, tellus blandit placerat faucibus, nulla lorem dignissim neque, ut iaculis tortor orci nec ligula. Nunc sodales convallis mattis. Etiam ac neque ac nisi volutpat imperdiet. Sed semper eleifend tellus, eget porta eros molestie ut. Quisque at ante sem. Donec non dolor tincidunt ipsum convallis suscipit. Aliquam ipsum nibh, dapibus at imperdiet tempus, fermentum ut velit.
<br /><br />
Vestibulum nibh orci, tincidunt nec sodales sit amet, lacinia vel nisi. Praesent tempor porttitor commodo. In hac habitasse platea dictumst. Donec suscipit, nunc in condimentum semper, tellus orci egestas nisl, pellentesque malesuada lacus lacus ac turpis. Donec at sapien ante. Praesent cursus dapibus turpis et porta. Etiam imperdiet aliquam augue, in varius sem tempor vitae. Phasellus at nunc id nisl vulputate porta vitae vitae quam.
<br /><br />
Morbi sodales nibh non lectus tincidunt elementum. Donec feugiat, nisi sit amet accumsan molestie, tellus lectus condimentum est, ut vulputate tellus ipsum in nisi. Duis mattis lorem et est vestibulum eu sollicitudin erat sodales. Integer porta varius imperdiet. Ut suscipit, lacus vel gravida iaculis, ipsum erat ultricies turpis, et egestas lacus sem id libero. Proin at mauris vel mi lobortis convallis vitae et tortor. In elementum mi vel ipsum tempus bibendum. Nam adipiscing, sem non semper rutrum, felis est lacinia felis, faucibus mollis diam ante et nisl. Nam erat eros, faucibus non porta vitae, rhoncus sit amet velit. Vestibulum sed elementum mauris. Praesent neque dolor, bibendum vel luctus lacinia, viverra nec odio. Morbi pharetra luctus ante non rutrum. Pellentesque rutrum, orci eu fringilla condimentum, felis massa tempor purus, quis rhoncus massa libero ac tortor. Phasellus a sapien est. Integer vulputate mauris eu erat pellentesque dictum. Phasellus eu lorem sed eros commodo convallis a at odio. </td></tr>
</tbody>
</table>
</div>
</body>
</html>
Please use this instead it solves your problem, however, it is strongly advised not to use page-breaking properties and table together by w3schools
code is here jsfiddle
<table style="font-size: 12pt; font-family: verdana; page-break-before: always">
<thead>
<tr><th align="center">HEADER</th></tr>
</thead>
<tbody>
<tr><td>
Basically, I created a second table where your desired page break should occur. And place the style of page-break-before: always on the table.
I have got a div that needs to have a fixed height and will have either floated or non-floated content.I had no issues with the CSS in Firefox and Safari but started having problems with IE6.Im using overflow:hidden to clear the float but the content gets clipped in IE6,so I used zoom to trigger the hasLayout property.The float gets cleared in IE 6 but I need the container to have a fixed height,if I specify a fixed height for the container the content gets clipped.Is it possbile to hav a div container that can have a fixed height and aslo have the overflow:hidden to clear the floats?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#boxContent{background:red;min-height:425px;height:auto !important;height:425px;overflow:hidden;zoom: 1;}
#box1{background:yellow;float:left;width:50%}
#box2{background:green;float:left;width:50%}
</style>
</head>
<body>
<div id="boxContent">
<div id="box1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat scelerisque purus nec elementum. Maecenas tempus sollicitudin tincidunt. Integer tincidunt volutpat ullamcorper. Etiam laoreet tincidunt nunc, sit amet venenatis est rhoncus vel. Aenean enim dui, blandit eget egestas blandit, blandit id purus. Curabitur non tortor neque, et ornare elit. Mauris at nisi turpis. Vivamus tempus, enim quis posuere laoreet, elit est varius tellus, vel faucibus nunc enim vel lacus. Sed semper feugiat nisi sit amet pulvinar. Duis mattis cursus nunc vel volutpat. Etiam ornare mollis leo ac mattis.
Cras sagittis mauris mi, et pellentesque arcu. Phasellus aliquet nisi sed tortor dictum faucibus. Morbi facilisis pretium lorem, in cursus augue fringilla eu. Morbi felis lectus, commodo at fermentum eget, varius at sem. Aenean dapibus lacus eu orci mollis porttitor. Curabitur nec purus quis risus imperdiet malesuada. Suspendisse potenti. In ipsum lorem, molestie ac sollicitudin at, dignissim eget est. Curabitur arcu eros, accumsan et pretium dignissim, pellentesque eget mi. In fringilla neque pharetra leo imperdiet ut dictum odio hendrerit. Etiam ligula nisl, feugiat vel mattis vel, pulvinar vitae dui.
Cras felis massa, porttitor sed bibendum at, vestibulum in nisi. Nulla egestas hendrerit felis, accumsan imperdiet tellus commodo id. Maecenas tincidunt justo ut erat porta et faucibus ante dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida tristique tristique. Etiam non dolor mi, id eleifend odio. Sed cursus nisl ut enim dictum adipiscing sed volutpat lacus. Quisque ut quam felis, quis vulputate velit. Fusce consequat, metus sed vulputate ultricies, leo leo tempor elit, vitae fringilla odio orci id leo. Sed nec neque nisl, eu fermentum arcu. Nunc facilisis scelerisque ipsum dictum feugiat. In hac habitasse platea dictumst. Pellentesque et nisl lacus, nec vulputate turpis. Nulla volutpat faucibus arcu et dapibus. Integer in erat libero, quis dignissim magna. Mauris metus felis, suscipit in euismod at, congue quis libero.
Vestibulum volutpat aliquet ligula commodo dignissim. Donec laoreet quam et massa consequat scelerisque viverra turpis tincidunt. Morbi quis leo lacus, at porttitor nunc. Fusce fermentum elementum felis id viverra. Sed semper varius convallis. Duis quam lorem, facilisis id consequat in, commodo eget diam. Curabitur dolor elit, volutpat id tincidunt vel, rutrum eu arcu. Fusce scelerisque gravida porttitor. Duis accumsan porttitor fermentum. Integer fringilla tincidunt ipsum, sed condimentum diam consequat in. Maecenas malesuada lacinia nisi, eu condimentum lectus molestie pretium. Sed quam nisi, blandit non pretium in, luctus id quam. Morbi ac feugiat orci. In ac convallis ipsum.
</p>
</div>
<div id="box2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat scelerisque purus nec elementum. Maecenas tempus sollicitudin tincidunt. Integer tincidunt volutpat ullamcorper. Etiam laoreet tincidunt nunc, sit amet venenatis est rhoncus vel. Aenean enim dui, blandit eget egestas blandit, blandit id purus. Curabitur non tortor neque, et ornare elit. Mauris at nisi turpis. Vivamus tempus, enim quis posuere laoreet, elit est varius tellus, vel faucibus nunc enim vel lacus. Sed semper feugiat nisi sit amet pulvinar. Duis mattis cursus nunc vel volutpat. Etiam ornare mollis leo ac mattis.
Cras sagittis mauris mi, et pellentesque arcu. Phasellus aliquet nisi sed tortor dictum faucibus. Morbi facilisis pretium lorem, in cursus augue fringilla eu. Morbi felis lectus, commodo at fermentum eget, varius at sem. Aenean dapibus lacus eu orci mollis porttitor. Curabitur nec purus quis risus imperdiet malesuada. Suspendisse potenti. In ipsum lorem, molestie ac sollicitudin at, dignissim eget est. Curabitur arcu eros, accumsan et pretium dignissim, pellentesque eget mi. In fringilla neque pharetra leo imperdiet ut dictum odio hendrerit. Etiam ligula nisl, feugiat vel mattis vel, pulvinar vitae dui.
Cras felis massa, porttitor sed bibendum at, vestibulum in nisi. Nulla egestas hendrerit felis, accumsan imperdiet tellus commodo id. Maecenas tincidunt justo ut erat porta et faucibus ante dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida tristique tristique. Etiam non dolor mi, id eleifend odio. Sed cursus nisl ut enim dictum adipiscing sed volutpat lacus. Quisque ut quam felis, quis vulputate velit. Fusce consequat, metus sed vulputate ultricies, leo leo tempor elit, vitae fringilla odio orci id leo. Sed nec neque nisl, eu fermentum arcu. Nunc facilisis scelerisque ipsum dictum feugiat. In hac habitasse platea dictumst. Pellentesque et nisl lacus, nec vulputate turpis. Nulla volutpat faucibus arcu et dapibus. Integer in erat libero, quis dignissim magna. Mauris metus felis, suscipit in euismod at, congue quis libero.
Vestibulum volutpat aliquet ligula commodo dignissim. Donec laoreet quam et massa consequat scelerisque viverra turpis tincidunt. Morbi quis leo lacus, at porttitor nunc. Fusce fermentum elementum felis id viverra. Sed semper varius convallis. Duis quam lorem, facilisis id consequat in, commodo eget diam. Curabitur dolor elit, volutpat id tincidunt vel, rutrum eu arcu. Fusce scelerisque gravida porttitor. Duis accumsan porttitor fermentum. Integer fringilla tincidunt ipsum, sed condimentum diam consequat in. Maecenas malesuada lacinia nisi, eu condimentum lectus molestie pretium. Sed quam nisi, blandit non pretium in, luctus id quam. Morbi ac feugiat orci. In ac convallis ipsum.
</p>
</div>
</div>
</body>
</html>
http://jsfiddle.net/hLwy8/10/
http://jsfiddle.net/hLwy8/11/
overflow:hidden hack does not work in ie6!
you need old style clear:both; at the end of the container