I have a HTML page which has a fixed footer div. It should be horizontally centered and at the bottom of the page. My code works fine if there is no much text on the page. If there is more text and the fixed footer div gets out of the screen, it disappears. I do not know why is that happening.
So, this works fine:
<div style="border: 1px solid blue; white-space: nowrap;">
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
</div>
<div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;">
This is the footer
</div>
But when there is more text and the footer gets out of the screen, it disappears. How could I fix this? Please note that the text on my content div should not be wrapped.
<div style="border: 1px solid blue; white-space: nowrap;">
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
</div>
<div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;">
This is the footer
</div>
<div style="border: 1px solid blue;">
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
</div>
<div style="border: 1px solid red; text-align: center;">
This is the footer
</div>
Related
I can create a link to jump to a specific section like this:
<h3 id="summary"> Summary: </h3>
Go to the conclusions
and it works.
But I found that if the summary section is near the end of a document page and
cannot fill the whole window,
it will be bottom-justified or aligned. Then the browser will show the
section in the middle of the window rather than at the top. I sometimes have to resize
the window smaller to fix the problem.
Is there a way to make the anchored element always show up at the top?
#Basta, this is now after clicking the link:
and this is what I was expecting where Summary is at the top:
I am trying to print a page with an <aside>. I'm also using Bootstrap 3.
I've added hidden-print to the aside like this:
<aside class="main-sidebar hidden-print">
However, when I print with Chrome, the space used by the aside is still shown?
How do I make it "disappear" and the rest of the content stretch to fill all the available space when printing?
I'm using the AdminLTE template, you can see a demo here:
https://almsaeedstudio.com/themes/AdminLTE/index2.html
Notice that if you expand the side bar (the default when opening the page) and do a print preview, the side bar content isn't shown, but their is a blank area. I want to make the body content fill the entire printed page.
Also, interestingly enough IE11 and FF appear correctly, it is just Chrome that is failing.
How I can redirect by pusching a button to a content from a DIV just with CSS? I mean..when i want to push a button with something i want to show in that content to appear a text and when I push another button, to clear that content and appear another text.
I'm trying a simple CSS parallex affect by fixing the background-image with a background-size of cover. Everything seems to work as i'd like but the background-image is too big. It's also cropped and enlarged compared to the original file. If i try to remove the "cover" attribute, and replace it with a more specific size the "parallex" type affect goes away, and i'm left with an odd scrolling transition with the image.
What's the best way to re-size the background-image so i can crop it the way i'd like but also have the affect i desire? As of now the image is too zoomed in.
.fullwidth_100 {
width:100%;
height:500px;
background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg');
background-position: center center;
background-attachment:fixed;
background-repeat: no-repeat;
/*background-size: 100% 80%; */
background-size:cover;
-webkit-transition: background-image 0.4s;
-moz-transition: background-image 0.4s;
-ms-transition: background-image 0.4s;
-o-transition: background-image 0.4s;
transition: background-image 0.4s;
overflow: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
Here is my Demo
Step 1: Download your image
Step 2: find Image width and height
Step 3: set the height and width like so:
.fullwidth_100 {
width: 1080px;
height: 500px;
}`
.fullwidth_100 {
width: 1440px;
height: 500px;
background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg');
background-position: center center;
-webkit-transition: background-image 0.4s;
-moz-transition: background-image 0.4s;
-ms-transition: background-image 0.4s;
-o-transition: background-image 0.4s;
transition: background-image 0.4s;
overflow: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
<div class="fullwidth_100">
<div class="large-12 columns">
<h3>Convenience is our goal</h3>
<p>With 30 years of experience we are your #1 choice in <br>providing quality printing solutions.</p>
Learn more about us >
</div>
</div>
<br>
<p>
Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here.
</p>
<p>
Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here.
</p>
<p>
Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here.
</p>
<p>
Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here.
</p>
<p>
Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here.
</p>
I successfully added the Facebook Like button to each my blog's posts.
The problem: posts whose titles are longer than one line cover the Like button. (See my blog here. Scroll half way down to posts with the problem, please.)
Here's what I know:
(1)the "headline_area" div includes the title and the author name. The content body of each posts is always directly beneath that div.
(2) When the title of a post is only one line, the Facebook Like button stays up again the bottom of the title. Because the "headline_area" div is consistent, the body of the post stays below both the title, author, and facebook like buttons.
(3) When the title is two lines, the "headline_area" div remains the same, but the Like button gets pushed down by the second line. The post content stays up against the headline_area div, thus overlapping the Like button.
I hope that is clear. Any help is much appreciated!
The problem is with CSS .headline_area style. It has defined fixed height to height: 80px (custom.css:7). Try removing it and changing facebook like iframe height.