This question already has an answer here:
Why does my header moves down when I set it fixed?
(1 answer)
Closed 1 year ago.
I am designing a page where on top i have a fixed navbar and under that I will have a <main> block. Inside <main> I have mutiple sections.
From Navbar when I click on any link to jump to the specific section the section heading slides under the navbar.
I have tried adding margin-top for both <main> and <section> but still the issue persist.
html, body{
margin:0;
padding:0;
scroll-behavior: smooth;
}
.nav{
height: 4rem;
width:100%;
background: transparent;/* #889EAF; */
border: 2px solid black;
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-around;
}
main{
margin-top:4rem;
}
section {
display: flex;
/* margin-top:4rem; */
/* justify-content: center; */
align-items: center;
flex-direction: column;
height: 93vh;
/* margin-top:7vh; */
}
.about {
height:100vh;
background:#D4B499;
}
.more {
height:fit-content;
background: #F3D5C0;
}
.card{
display: flex;
flex-direction: column;
/* position: absolute; */
/* top: 13%; */
align-items: center;
background-color: white;
padding: 0.75rem;
width: 90%;
height: fit-content;
border: 1px solid #bfc5c9;
border-radius: 1.125rem;
box-shadow: 0px 0px 20px #bdc3c7;
/* z-index: 10; */
margin: 1rem;
}
.heading {
align-self: center;
font-size: 2.5rem;
padding: 1rem 0rem 0rem 2rem;
}
<div class="nav">
<div>About</div>
<div>More
</div>
</div>
<main>
<section id="about" class="about">
<div class="heading">This is about section</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</section>
<section id="more" class="more">
<div class="heading">This is something more</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</section>
</main>
Please find a live example of the issue # CodePen
As your nav is fixed so you have to position it using top
top: 0;
z-index: 1;
background-color: white;
html,
body {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
.nav {
top: 0;
z-index: 1;
background-color: white;
height: 4rem;
width: 100%;
background: white;
/* #889EAF; */
border: 2px solid black;
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-around;
}
main {
margin-top: 4rem;
}
section {
display: flex;
/* margin-top:4rem; */
/* justify-content: center; */
align-items: center;
flex-direction: column;
height: 93vh;
/* margin-top:7vh; */
}
.about {
height: 100vh;
background: #d4b499;
}
.more {
height: fit-content;
background: #f3d5c0;
}
.card {
display: flex;
flex-direction: column;
/* position: absolute; */
/* top: 13%; */
align-items: center;
background-color: white;
padding: 0.75rem;
width: 90%;
height: fit-content;
border: 1px solid #bfc5c9;
border-radius: 1.125rem;
box-shadow: 0px 0px 20px #bdc3c7;
/* z-index: 10; */
margin: 1rem;
}
.heading {
align-self: center;
font-size: 2.5rem;
padding: 1rem 0rem 0rem 2rem;
}
<div class="nav">
<div>About</div>
<div>More</div>
</div>
<main>
<section id="about" class="about">
<div class="heading">This is about section</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</section>
<section id="more" class="more">
<div class="heading">This is something more</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</section>
</main>
Add these to .nav. class
top: 0;
background: white;
top: 0 puts the nav on top and you need to set a background color so the nav is visible on top
You can position the <main> element with position absolute like this
main{
position: absolute;
top: 4rem;
}
also add z-index to the navbar so that it stays above the main elements, you can do it like this
.nav{
z-index: 1
}
credits to #HR01M8055 for suggesting the z-index edit
Related
This question already has answers here:
Fixed page header overlaps in-page anchors
(38 answers)
Closed 11 months ago.
I created a link (Bookmark) to the same page. But here I face a problem. When I click the link on the link from the sidebar, it works fine but the headline or some part doesn't appear correctly on the display.
When I click the link the heading or some part is hidden for the header.
But I want the full part will be displayed like this -
How do I solve this issue?
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #333;
background-color: #fff;
z-index: 5;
top: 0;
position: fixed;
}
nav{
width: 20%;
height: 100%;
top: 0;
left: 0;
position: fixed;
border-right: 1px solid #333;
}
article{
padding-top: 60px;
margin-left: 20%;
width: 60%;
}
aside{
width: 20%;
right: 0;
top: 0;
position: fixed;
border-left: 1px solid #333;
height: 100%;
padding-top: 60px;
}
<header></header>
<nav></nav>
<article>
<a name="hyper-1"></a>
<h1>Hyper 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-2"></a>
<h1>Hyper 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-3"></a>
<h1>Hyper 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
<aside>
IN THIS CONTENT:
Hyper-1<br/>
Hyper-2<br/>
Hyper-3<br/>
</aside>
the issue is due to elements are empty. they have no consistency and scroll to this element don't push following at the top of the div
to solve it an idea can be to have an hidden after element after <a> to push following as expected when scroll to this anchor point
article a::after {
content: ' ';
padding: 12px;
}
header {
width: 100%;
height: 50px;
border-bottom: 1px solid #333;
background-color: #fff;
z-index: 5;
top: 0;
position: fixed;
}
nav {
width: 20%;
height: 100%;
top: 0;
left: 0;
position: fixed;
border-right: 1px solid #333;
}
article {
padding-top: 60px;
margin-left: 20%;
width: 60%;
}
article a::after {
content: ' ';
padding: 12px;
}
aside {
width: 20%;
right: 0;
top: 0;
position: fixed;
border-left: 1px solid #333;
height: 100%;
padding-top: 60px;
}
<header></header>
<nav></nav>
<article>
<a name="hyper-1"></a>
<h1>Hyper 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-2"></a>
<h1>Hyper 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-3"></a>
<h1>Hyper 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
<aside>
IN THIS CONTENT:
Hyper-1<br/>
Hyper-2<br/>
Hyper-3<br/>
</aside>
If I get it correctly, you need to scroll on top of the page any time it gets loaded... since it may be loaded from a link coming from the very same page.
One solution is to scroll on top of the page as soon as it's ready:
$(document).ready(function(){
$(this).scrollTop(0);
});
I'm trying to create a sidebar but I can't seem to make it sticky,
I need the totalWrapper (which includes the sidebar (red) and title ) to be sticky to the body AFTER we scroll past head
basically the black box should be sticky within the blue box, the blue box is the remaining height of the body
(the black and blue box are just added to explain the question and are legends i.e. not required in the actual code)
I feel like I'm making a rookie mistake.
can someone please explain what I'm doing wrong?
jsfiddle
* {
text-align: center;
}
html {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: pink;
position: relative;
}
#main {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
width: 50%;
background-color: white;
margin: auto;
}
#totalWrapper {
position: sticky;
top: 0;
}
#title {
width: 100%;
height: 50px;
background-color: green;
}
#optionsWrapper {
background-color: red;
position: relative;
height: 100vh;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">head</div>
<div id="main">
<div style="margin:5rem">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div id="totalWrapper">
<div id="title">title</div>
<div id="optionsWrapper">
option 1<br>
option 2<br>
option 3<br>
option 4<br>
</div>
</div>
</body>
</html>
Ok, I did a little “hack” which I do not like very much since it does not feels clean and elegant (I will continue thinking on it). It gets the job done, though. I change the order of the HTML elements since the sticky part needs to come before the main content. I also clean the CSS a little bit to get rid of unnecessary code for the example to work, that way it is also easier to follow.
body {
margin: 0;
text-align: center;
font-size: 18px;
}
#header {
width: 100%;
height: 100px;
background-color: pink;
}
#stickyWrapper {
position: sticky;
height: 100vh;
top: 0;
}
#title {
height: 50px;
background-color: green;
}
#sidebar {
height: 100%;
width: 50%;
background-color: red;
}
#content {
margin-top: calc(-100vh + 50px);
/* =====> the negative height of the stickyWrapper
plus the positive height of the header */
margin-left: auto;
width: 50%;
}
<div id="header">head</div>
<div id="stickyWrapper">
<div id="title">title</div>
<div id="sidebar">
option 1<br> option 2<br> option 3<br> option 4<br>
</div>
</div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</div>
I was trying to draw a simple Blogspot page with HTML and CSS. I have designed some. Now I am stuck. I have a code:
body{
background-color: #5e769b;
font: 16px/28px, arial, sans-serif;
}
.container{
background-color: #edeff2;
width: 790px;
margin: auto;
}
.header{
padding-bottom: 20px;
background-color: #6191dd;
text-align: center;
}
.article{
padding: 20px;
text-align: justify;
background-color: #f9f9f9;
box-sizing: border-box;
width: 70%;
float: left;
}
.sidebar {
padding: 20px;
text-align: justify;
background-color: #f9f9f9;
box-sizing: border-box;
width: 30%;
float: right;
}
.footer{
padding: 10px;
text-align: center;
background-color: #6b4edb;
box-sizing: border-box;
width: 100%;
color: #263959;
}
.footer,
a {
text-decoration: none;
color: #fff;
}
<div class="container">
<div class="header">
<h1>welcome</h1>
<h2>test blog</h2>
</div>
<div class="article">
<h2>Article</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="sidebar">
<h2>sidebar</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="footer">
<h4>CopyRight # footer</h4>
</div>
</div>
This code is not letting the footer at the bottom. Footer is with the sidebar.
I want footer at the bottom of the container as shown in below image
https://i.imgur.com/PFuGq2I.jpg
What changes should I make in CSS or HTML?
Thank you.
You put your "footer" in a div. you should use the html tag .
So take off the < div class="footer" > thing and then go after the < /body > tag and write:
<footer class="footer">
<h4>Copyright # Footer</h4>
</footer>
put the <div> like this before <div class="footer">.
<div class="footerToBottom"></div>
and add css code for this segment:
.footerToBottom{
clear:both;
display:block;
width:0 !important;
height:0 !important;
min-height:0 !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden
}
body{
background-color: #5e769b;
font: 16px/28px, arial, sans-serif;
}
.container{
background-color: #edeff2;
width: 790px;
margin: auto;
}
.header{
padding-bottom: 20px;
background-color: #6191dd;
text-align: center;
}
.article{
padding: 20px;
text-align: justify;
background-color: #f9f9f9;
box-sizing: border-box;
width: 70%;
float: left;
}
.sidebar {
padding: 20px;
text-align: justify;
background-color: #f9f9f9;
box-sizing: border-box;
width: 30%;
float: right;
}
.footer{
padding: 10px;
text-align: center;
background-color: #6b4edb;
box-sizing: border-box;
width: 100%;
color: #263959;
}
.footer,
a {
text-decoration: none;
color: #fff;
}
.footerToBottom{
clear:both;
display:block;
width:0 !important;
height:0 !important;
min-height:0 !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden
}
<div class="container">
<div class="header">
<h1>welcome</h1>
<h2>test blog</h2>
</div>
<div class="article">
<h2>Article</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="sidebar">
<h2>sidebar</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="footerToBottom"></div>
<div class="footer">
<h4>CopyRight # footer</h4>
</div>
</div>
I want to print A4 size paper TWO column. So i split the page. here i used
display: block; page-break-before: always;
Its worked fine. But after page break content not showing.
Demo
I need after page break content continue on next div. It is possible?
Expected Results Like this
Try putting the last paragraph from the first div, into the second div, and run.
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 14px "Tahoma";
line-height:28px
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.text-center{
text-align:center;
}
.regno li, .answer_block div,.answer_block div p{
display:inline-block;
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 10px;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 10px;
border: 1px red solid;
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
margin-left: 160px;
margin-top: -165px;
width: 180mm;
height: 267mm;
}
.subpage.second{
margin-left: 160px;
margin-top: -280px;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
p {
display: block; page-break-before: always;
}
}
<div class="page">
<div class="subpage" >
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="subpage second" >
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
Whenever I try to add columns to my page, my footer becomes unstuck and the content goes into the footer. However it works perfectly fine when I add content straight to the holding content div.
HTML:
<div id="wrapper">
<div id="content">
<div class="left_content">
</div>
<div class="right_content">
</div>
</div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
font-family: arial, sans-serif;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:96px; /* Height of the footer element */
width: 960px;
margin-left: auto;
margin-right: auto;
}
#footer {
background:#162b83;
width:960px;
height:96px;
position:absolute;
bottom:0;
left:50%;
margin-left: -480px;
}
div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}
div.right_content {
width: 400px;
float: left;
}
Hi I made some adjustments in your code and updated here
Please check it, this is what you need. Thanks.
html
<div id="content">
<div class="left_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.SS</p>
</div>
<div class="right_content"> sdfasd </div>
<div class="footer-outer">
<div id="footer"></div>
</div>
</div>
css
body {
padding: 0;
margin: 0;
}
#content {
padding-bottom: 96px; /* Height of the footer element */
width: 960px;
margin: 0 auto;
}
div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}
div.right_content {
width: 400px;
float: left;
}
.footer-outer {
float: left;
width: 960px;
position: relative;
}
#footer {
background: #162b83;
width: 960px;
height: 96px;
position: absolute;
bottom: -96px;
left: 0;
}