CSS footer override section - html

Question

i create a letter template with every page header/footer
but when content is too long it not breaking page before footer section how i can do it ?
in my now the content overriding to the footer section in printing media
please any suggestion or help how i can repeat a header and footer every page then print the
.mmm div that contains content section without override
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width:50%
}
.my-header {
top: 0;
right: -150;
position: fixed;
width:100%;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
You begin with a text, you sculpt information, you chisel away what's not needed, you come to the point, make things clear, add value, you're a content person, you like words. Design is no afterthought, far from it, but it comes in a deserved second. Anyway, you still use Lorem Ipsum and rightly so, as it will always have a place in the web workers toolbox, as things happen, not always the way you like it, not always in the preferred order. Even if your less into design and more into content strategy you may find some redeeming value with, wait for it, dummy copy, no less.
Consider this: You made all the required mock ups for commissioned layout, got all the approvals, built a tested code base or had them built, you decided on a content management system, got a license for it or adapted open source software for your client's needs. Then the question arises: where's the content? Not there yet? That's not so bad, there's dummy copy to the rescue. But worse, what if the fish doesn't fit in the can, the foot's to big for the boot? Or to small? To short sentences, to many headings, images too large for the proposed design, or too small, or they fit in but it looks iffy for reasons the folks in the meeting can't quite tell right now, but they're unhappy, somehow. A client that's unhappy for a reason is a problem, a client that's unhappy though he or her can't quite put a finger on it is worse.
But. A big but: Lorem Ipsum is not t the root of the problem, it just shows what's going wrong. Chances are there wasn't collaboration, communication, and checkpoints, there wasn't a process agreed upon or specified with the granularity required. It's content strategy gone awry right from the start. Forswearing the use of Lorem Ipsum wouldn't have helped, won't help now. It's like saying you're a bad designer, use less bold text, don't use italics in every other paragraph. True enough, but that's not all that it takes to get things back on track.
So Lorem Ipsum is bad (not necessarily)
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content:
I’ve heard the argument that “lorem ipsum” is effective in wireframing or design because it helps people focus on the actual layout, or color scheme, or whatever. What kills me here is that we’re talking about creating a user experience that will (whether we like it or not) be DRIVEN by words. The entire structure of the page or app flow is FOR THE WORDS.
If that's what you think how bout the other way around? How can you evaluate content without design? No typography, no colors, no layout, no styles, all those things that convey the important signals that go beyond the mere textual, hierarchies of information, weight, emphasis, oblique stresses, priorities, all those subtle cues that also have visual and emotional appeal to the reader. Rigid proponents of content strategy may shun the use of dummy copy but then designers might want to ask them to provide style sheets with the copy decks they supply that are in tune with the design direction they require.
Or else, an alternative route: set checkpoints, networks, processes, junctions between content and layout. Depending on the state of affairs it may be fine to concentrate either on design or content, reversing gears when needed.
Or maybe not. How about this: build in appropriate intersections and checkpoints between design and content. Accept that it’s sometimes okay to focus just on the content or just on the design.
Luke Wroblewski, currently a Product Director at Google, holds that fake data can break down in real life:
Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does.
Websites in professional use templating systems. Commercial publishing platforms and content management systems ensure that you can show different text, different data using the same template. When it's about controlling hundreds of articles, product pages for web shops, or user profiles in social networks, all of them potentially with different sizes, formats, rules for differing elements things can break, designs agreed upon can have unintended consequences and look much different than expected.
This is quite a problem to solve, but just doing without greeking text won't fix it. Using test items of real content and data in designs will help, but there's no guarantee that every oddity will be found and corrected. Do you want to be sure? Then a prototype or beta site with real content published from the real CMS is needed—but you’re not going that far until you go through an initial design cycle.
Lorem Ipsum actually is usefull in the design stage as it focuses our attention on places where the content is a dynamic block coming from the CMS (unlike static content elements that will always stay the same.) Blocks of Lorem Ipsum with a character count range provide a obvious reminder to check and re-check that the design and the content model match up.
Kyle Fiedler from the Design Informer feels that distracting copy is your fault:
If the copy becomes distracting in the design then you are doing something wrong or they are discussing copy changes. It might be a bit annoying but you could tell them that that discussion would be best suited for another time. At worst the discussion is at least working towards the final goal of your site where questions about lorem ipsum don’t.
Summing up, if the copy is diverting attention from the design it’s because it’s not up to task.
Typographers of yore didn't come up with the concept of dummy copy because people thought that content is inconsequential window dressing, only there to be used by designers who can’t be bothered to read. Lorem Ipsum is needed because words matter, a lot. Just fill up a page with draft copy about the client’s business and they will actually read it and comment on it. They will be drawn to it, fiercely. Do it the wrong way and draft copy can derail your design review.
Asking the client to pay no attention Lorem Ipsum isn't hard as it doesn’t make sense in the first place, that will limit any initial interest soon enough. Try telling a client to ignore draft copy however, and you're up to something you can't win. Whenever draft copy comes up in a meeting confused questions about it ensue.
Summing up, really:
Lorem Ipsum is a tool that can be useful, used intentionally it may help solve some problems. If you go about content strategy the wrong way, fix that problem.</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>
html code
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">content </span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>
CSS Code
#media print{
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width:50%
}
.my-header {
top: 0;
right: -150;
position: fixed;
width:100%;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
}

Answer 1

add a width of 100% to the footer section and give it a non-transparent background.See in the snippet, works then fine.
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width: 100%;
background-color: white;
text-align: center;
margin: 0;
}
.my-header {
top: 0;
right: 0;
position: fixed;
width:100%;
background-color: white;
text-align: center;
margin: 0;
z-index: 2;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
You begin with a text, you sculpt information, you chisel away what's not needed, you come to the point, make things clear, add value, you're a content person, you like words. Design is no afterthought, far from it, but it comes in a deserved second. Anyway, you still use Lorem Ipsum and rightly so, as it will always have a place in the web workers toolbox, as things happen, not always the way you like it, not always in the preferred order. Even if your less into design and more into content strategy you may find some redeeming value with, wait for it, dummy copy, no less.
Consider this: You made all the required mock ups for commissioned layout, got all the approvals, built a tested code base or had them built, you decided on a content management system, got a license for it or adapted open source software for your client's needs. Then the question arises: where's the content? Not there yet? That's not so bad, there's dummy copy to the rescue. But worse, what if the fish doesn't fit in the can, the foot's to big for the boot? Or to small? To short sentences, to many headings, images too large for the proposed design, or too small, or they fit in but it looks iffy for reasons the folks in the meeting can't quite tell right now, but they're unhappy, somehow. A client that's unhappy for a reason is a problem, a client that's unhappy though he or her can't quite put a finger on it is worse.
But. A big but: Lorem Ipsum is not t the root of the problem, it just shows what's going wrong. Chances are there wasn't collaboration, communication, and checkpoints, there wasn't a process agreed upon or specified with the granularity required. It's content strategy gone awry right from the start. Forswearing the use of Lorem Ipsum wouldn't have helped, won't help now. It's like saying you're a bad designer, use less bold text, don't use italics in every other paragraph. True enough, but that's not all that it takes to get things back on track.
So Lorem Ipsum is bad (not necessarily)
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content:
I’ve heard the argument that “lorem ipsum” is effective in wireframing or design because it helps people focus on the actual layout, or color scheme, or whatever. What kills me here is that we’re talking about creating a user experience that will (whether we like it or not) be DRIVEN by words. The entire structure of the page or app flow is FOR THE WORDS.
If that's what you think how bout the other way around? How can you evaluate content without design? No typography, no colors, no layout, no styles, all those things that convey the important signals that go beyond the mere textual, hierarchies of information, weight, emphasis, oblique stresses, priorities, all those subtle cues that also have visual and emotional appeal to the reader. Rigid proponents of content strategy may shun the use of dummy copy but then designers might want to ask them to provide style sheets with the copy decks they supply that are in tune with the design direction they require.
Or else, an alternative route: set checkpoints, networks, processes, junctions between content and layout. Depending on the state of affairs it may be fine to concentrate either on design or content, reversing gears when needed.
Or maybe not. How about this: build in appropriate intersections and checkpoints between design and content. Accept that it’s sometimes okay to focus just on the content or just on the design.
Luke Wroblewski, currently a Product Director at Google, holds that fake data can break down in real life:
Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does.
Websites in professional use templating systems. Commercial publishing platforms and content management systems ensure that you can show different text, different data using the same template. When it's about controlling hundreds of articles, product pages for web shops, or user profiles in social networks, all of them potentially with different sizes, formats, rules for differing elements things can break, designs agreed upon can have unintended consequences and look much different than expected.
This is quite a problem to solve, but just doing without greeking text won't fix it. Using test items of real content and data in designs will help, but there's no guarantee that every oddity will be found and corrected. Do you want to be sure? Then a prototype or beta site with real content published from the real CMS is needed—but you’re not going that far until you go through an initial design cycle.
Lorem Ipsum actually is usefull in the design stage as it focuses our attention on places where the content is a dynamic block coming from the CMS (unlike static content elements that will always stay the same.) Blocks of Lorem Ipsum with a character count range provide a obvious reminder to check and re-check that the design and the content model match up.
Kyle Fiedler from the Design Informer feels that distracting copy is your fault:
If the copy becomes distracting in the design then you are doing something wrong or they are discussing copy changes. It might be a bit annoying but you could tell them that that discussion would be best suited for another time. At worst the discussion is at least working towards the final goal of your site where questions about lorem ipsum don’t.
Summing up, if the copy is diverting attention from the design it’s because it’s not up to task.
Typographers of yore didn't come up with the concept of dummy copy because people thought that content is inconsequential window dressing, only there to be used by designers who can’t be bothered to read. Lorem Ipsum is needed because words matter, a lot. Just fill up a page with draft copy about the client’s business and they will actually read it and comment on it. They will be drawn to it, fiercely. Do it the wrong way and draft copy can derail your design review.
Asking the client to pay no attention Lorem Ipsum isn't hard as it doesn’t make sense in the first place, that will limit any initial interest soon enough. Try telling a client to ignore draft copy however, and you're up to something you can't win. Whenever draft copy comes up in a meeting confused questions about it ensue.
Summing up, really:
Lorem Ipsum is a tool that can be useful, used intentionally it may help solve some problems. If you go about content strategy the wrong way, fix that problem.</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>