I want my footer to be always on the bottom of the page, even when the content is very short. I have checked this one  but does not work.  My HTML:  &lt;body&gt;    &lt;div id="container"&gt;       &lt;div id="header"&gt;&lt;/div&gt;       &lt;div id="content"&gt;&lt;/div&gt;   &lt;/div&gt;   &lt;div id="wrap-footer"&gt;       &lt;div id="footer"&gt;&lt;/div&gt;   &lt;/div&gt;  &lt;/body&gt;   My CSS:   #footer {     height: 320px;    position: absolute;    width: 100%;    bottom: 0;  }   With this one, when I have a short content is ok, but when I have a long one the footer goes in the middle of the page and stuck there. Does anyone have an idea ? Thanks in advance
3362
I have a simple 2-column layout with a footer that clears both the right and left div in my markup.  My problem is that I can't get the footer to stay at the bottom of the page in all browsers.  It works if the content pushes the footer down, but that's not always the case.
92662
(A) How do I shift the footnote vertically down 1 mm or so? (B) I want to introduce some additional space in between one foot note and the next one, and between the first footnote and the line that separates it from the regular text.  \vspace{1mm} inside the \footnote{} command does not solve this.  Using XeTex  \documentclass[12pt]{article} \usepackage[top = 1in, bottom = 1in, left = 1in, right = 1in]{geometry} \usepackage{amsmath, booktabs, graphicx, setspace} \usepackage[T1]{fontenc} \usepackage[hang]{footmisc} \begin{document} \begin{spacing}{1.9} TEXT.\footnote{\vspace{1mm} my footnote is here.} \end{spacing} \end{document}   (C) How do I prevent a long footnote from partly continuing in the next page? (D) I must also find a way to linebreak in footnotes without justifying the first line.  The footmisc package (with the 'hang' option) only makes the footnote symbol flush to the left. (E) I would actually like to put it a couple points away from the left margin. (F) And make the footnote number bold.
108830
I've got a div that contains some content that's being added and removed dynamically, so its height is changing often. I also have a div that is absolutely positioned directly underneath with javascript, so unless I can detect when the height of the div changes, I can't reposition the div below it.  So, how can I detect when the height of that div changes? I assume there's some jQuery event I need to use, but I'm not sure which one to hook into.
13086
I want to put two &lt;div&gt;s next to each other. The right &lt;div&gt; is about 200px; and the left &lt;div&gt; must fill up the rest of the screen width? How can I do this?
26548
A client of mine is insisting on two things for a website I am designing:    That every single link is shown in the header – about 10 links or so with no sub-categories. ie. no drop-downs, rollovers, or sub-navigation.   That the header is always visible and static up the top. The content below it will scroll independently but the header is always up the top.    Now, to me, I don't like the idea of the navigation being always up the top. It means I have to go to lengths to reduce the height so that you can see enough content below it on smaller monitors. I believe that users know to find navigation up the top intuitively and don't need to have the nav forced on them at all times. In the client's eyes – this is "easier" – but in mine, it's treating the audience as stupid and smacks of Web 1.0 principles (namely frames).  So my question is – is it bad UX to have a fixed-position header?
29940
How can I add horizontal line after header and before footer?   header ---------  --------- footer
62694
When writing a long post, if you want to check the output as you go along, you have to keep scrolling down and then back up to see the preview of the output.  Which gets annoying after a post gets long enough.  I imagine on Math or other sites where there is a lot of rendered output this is an even bigger annoyance.  Is it possible to give the preview box a standard size, which could be elongated at the bottom, and able to be scrolled, just like the box I'm typing in right now?  That way, I could position my window so that the editing box and the preview box are both in full view at the position that I am currently working on.
95305
It maby be weird, I want to make header and footer for every page including the first page of each chapter, how can I do this?
51545
Does anyone know how to make text align top-to-bottom in a div.  SO won't even let me demonstrate it . . . I just want the letters to stack on top of each other in a vertical line down the page like the stories of a building. Was hoping I didn't need to do it with an image.
11517
I want a table that is as wide as the whole page in a document with option twocolumn. The table has to be inserted on the bottom of the page, but that is not necessary.  I've tried:  \begin{table*}[b]   ... \end{table*}   But that puts the table at the end of the document instead of on the same page.  I also tried:  \twocolumn[   \begin{table}[b]     ...   \end{table} ]   But that gives me an error: ! Argument of \@xfloat has an extra }. Combining \twocolumn and the star mark gives the same error.  What's the right way to do this?
42857
The following Q&amp;A is based on an answer I wanted to give for , but since a radical edit of the question, my answer does no longer fit, so I'm going to post it as a new question, in the hope it might be useful for someone else.   How to uncover \footfullcite step by step?
74861
On all Stack Exchange sites there is a chat in the footer why is there none at Stack Overflow? Usually I find it over Google or a bookmark, but I was wondering why it is this way.
25947
I have the following code for my masterpage:  &lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %&gt; &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server" style="position:relative"&gt;     &lt;title&gt;Masterpage&lt;/title&gt;     &lt;asp:ContentPlaceHolder id="head" runat="server"&gt;     &lt;/asp:ContentPlaceHolder&gt; &lt;/head&gt; &lt;body&gt;     &lt;form id="main" runat="server" style="position:relative"&gt;     &lt;div&gt;         &lt;asp:ContentPlaceHolder id="MainContent" runat="server"&gt;         &lt;/asp:ContentPlaceHolder&gt;     &lt;/div&gt;     &lt;/form&gt;     &lt;br style="clear:both" /&gt;     &lt;form id="footer" style="position:relative"&gt;     &lt;div&gt;         &lt;center style="font-size:small"&gt;Footer content&lt;/center&gt;     &lt;/div&gt;         &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;   My problem is that when the MainContent isn't filling up the page the footer is not at the bottom of the page. Is there a way to force the footer to stay on the bottom of the page if the main content isn't pushing it all the way down? When the main content is "big" enough it pushes the footer down with the content and displays on the bottom when scrolling down, but not if it is to small.  Anybody know how to fix this?
89884
I am trying to position node(2) in a page in coordinates related to the page (origin at upper left corner of the body of the page). My code is:  \documentclass[border=10pt,a4paper]{memoir} \usepackage[total={16.51cm,21.59cm}, top=1.2in, left=0.9in, includefoot]{geometry} \usepackage{tikz} \usepackage{fancyhdr} \usepackage{comment} \pagestyle{fancy} \fancyhf{} \renewcommand{\headrulewidth}{2pt} \renewcommand{\footrulewidth}{1pt} \begin{document} \begin{tikzpicture} \node[](1) at (0cm,0cm) {1}; \node[](2) at (0.5\textwidth,-0.5\textheight) {2}; \end{tikzpicture} \vspace{1cm} \noindent \end{document}   For node(2) to be positioned in the centre of the page at (0.5\textwidth,-0.5\textheight) I have to create another node (1) in the origin, otherwise node(2) will be put at (0,0). I would like that someone could explain this strange behaviour.
8738
I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.  This is the desired layout in bad-ASCII-art format:  _____________________  _ |    | long    |logo|   | |    | content |    |   | |    |         |    |   | |    |         |    |   | |grad|         |grad|   | Viewport |    |         |    |   | |    |         |    |   | |    |         |    |  _| |    |         |    | |    |         |    | _____________________  |2em| &lt;-20em-&gt;| 2em|   ..or with short content..  _____________________  _ |    | short   |logo|   | |    | content |    |   | |    |         |    |   | |    |         |    |   | |grad|         |grad|   | Viewport |    |         |    |   | |    |         |    |   | |    |         |    |   | |    |         |    |   | _____________________  _|   Basically it looks like a single column, with a glow as a column either side. Over the left-glow is a logo. When the content is short, it is still the full-height.  I have tried using the , which fixes the middle column, but then the gradients only extend as far as the content (in the left column, a single &amp;nbsp;, in the right column the logo)    Here is what the layout looks like:    And the problem (when the browser window is shrunk vertically):    Finally, the problem HTML/CSS,
2807
Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div when they are not in that order in the HTML? Both divs contain data that varies in height and width.  &lt;div id="wrapper"&gt;     &lt;div id="firstDiv"&gt;         Content to be below in this situation     &lt;/div&gt;     &lt;div id="secondDiv"&gt;         Content to be above in this situation     &lt;/div&gt; &lt;/div&gt; Other elements   Hopefully it is obvious that the desired result is:  Content to be above in this situation Content to be below in this situation Other elements   When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.  I am specifically looking for a CSS-only solution (and it will probably have to be met with other solutions if that doesn't pan out).   There are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated&mdash;given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.
30717
When I can scroll down far enough to have the hot network questions overlap the footer (because my question is short) there is no background under the text:    Could they either be given a white background: (just disable the transparency option)    Or stop at the footer:      This also happens with the help text on some sites, as per this bug report:     Ubuntu 14.04.1 (Latest LTS Version), . Same problem with  and .  Windows 10 Pro,  and .  (Images linked to screenshot of browser)  My question is different from  because my issue is the lack of background on the footer.   I think there was a site redesign?