I am relatively new to CSS. I am trying to create a normal page layout using HTML &amp; CSS, but I am facing an issue. Here is my HTML.  &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&gt;     &lt;title&gt;Jquery&lt;/title&gt;     &lt;link rel="stylesheet" type="text/css" href="../css/StyleSheet1.css"&gt;     &lt;script type="text/javascript" src="../javascript/jQuery.js""&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt;     &lt;div class="container"&gt;         &lt;div class="header"&gt;&lt;/div&gt;         &lt;div class="content"&gt;&lt;/div&gt;         &lt;div class="footer"&gt;&lt;/div&gt;     &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;   Here is my CSS script  html,body {     padding: 0px;     margin: 0px;     color: #555;     font-size: 20px;     font-family:  "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;     height: 100%; }  .container {     height: 100%;     background-color: Green;     position: relative; }  .header  {     height: 300px;     width: 100%;     background-color: Red; }  .content {     width: 100%;     background-color: Black; }  .footer {        height: 500px;     width: 100%;     background-color: Violet;     position: absolute;     bottom: 0px; }   I am trying to create a header, footer and a content div. But my content div should automatically change it's height. If there is nothing inside content div then my page should at least have content height equal to (page height - (header height + footer height)).
571
I am working on a web application where I want the content to fill the height of the entire screen.  The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.  I have a header div and a content div. At the moment I am using a table for the layout like so:  CSS and HTML    #page {     height: 100%; width: 100% }  #tdcontent {     height: 100%; }  #content {     overflow: auto; /* or overflow: hidden; */ } &lt;table id="page"&gt;     &lt;tr&gt;         &lt;td id="tdheader"&gt;             &lt;div id="header"&gt;...&lt;/div&gt;         &lt;/td&gt;     &lt;/tr&gt;     &lt;tr&gt;         &lt;td id="tdcontent"&gt;             &lt;div id="content"&gt;...&lt;/div&gt;         &lt;/td&gt;     &lt;/tr&gt; &lt;/table&gt;     The entire height of the page is filled, and no scrolling is required.  For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting header inside content will not allow this to work.  Is there a way to achieve the same effect without using the table?  Update:  Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.  Update 2:  For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.
78891
As the title describes, what are the different doctypes available and what do they mean? I notice that the layout looks a little different in IE7 when I switch from   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" &gt;   to  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;   Are there any others and what are the effects or ramifications?  Thanks!
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?
55897
How would one increase the height of the \fancyhead{} so that the text in the main body, doesn't collide with the title?  I have the following MWE:  \documentclass[a4paper,10pt,oneside]{article} \usepackage{fancyhdr} \usepackage[english]{babel} % Required to compile in Windows \usepackage[letterspace=150]{microtype} \usepackage{fontspec}  \pagestyle{fancy} \setmainfont {Adobe Garamond Pro} % Main document font  \renewcommand{\headrulewidth}{0pt}  \fancyhead[C]{     \addfontfeature{LetterSpace=20.0}\fontsize{30}{30}\selectfont\scshape Foo Bar Camp Names\\[5mm] }  \begin{document} \section*{Foo} \end{document}   However, the section foo starts right in the header, therefore I want to add some vspace in between header and main body. I tried \vspace, \bigskip, and all other sorts of vertical space commands, but none worked.  Updated MWE:  \documentclass[a4paper,10pt,oneside]{article} \usepackage{marvosym} % Allows the use of symbols \usepackage[english]{babel} % Required to compile in Windows \usepackage[letterspace=150]{microtype} \usepackage{fontspec} \usepackage{fancyhdr} %\usepackage[headheight=110pt]{geometry}  \pagestyle{fancy} \setmainfont {Adobe Garamond Pro} % Main document font  \renewcommand{\headrulewidth}{0pt} \setlength{\headheight}{110pt}   \fancyhead[C]{     \addfontfeature{LetterSpace=20.0}\fontsize{30}{30}\selectfont\scshape Foo Bar Camp Names\\ }  \fancyfoot[C]{     \lsstyle     \scshape{         \renewcommand{\\}{\ {\large\textperiodcentered}\ }         Foo Street \\Bar\\Foocountry     }\\     {\Large\Letter} foo@bar.com \ {\Large\Telefon} (+001) 000-0000000 }  \begin{document} \date{} % hide date \section*{Foo Bar} \end{document}
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?
14534
I created a horizontal menu using a HTML lists and CSS. Everything works as it should except when you hover over the links. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference.  I encounter the same problem as . However, the post does not have proper solution. I've searched everywhere for a solution and can't find one. Surely I can't be the only one trying to do this.  Does anyone have any ideas?  P.S: I don't know the width of the text in menu items so I cannot just set the width of the li items.    .nav { margin: 0; padding: 0; } .nav li {      list-style: none;      display: inline;      border-left: #ffffff 1px solid;  } .nav li a:link, .nav li a:visited {      text-decoration: none;      color: #000;      margin-left: 8px;      margin-right: 5px;  } .nav li a:hover{      text-decoration: none;      font-weight: bold;  } .nav li.first { border: none; } &lt;ul class="nav"&gt;     &lt;li class="first"&gt;&lt;a href="#"&gt;item 0&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 2&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 3&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;
6298
Best way to center a &lt;div&gt; element on a page both vertically and horizontally?  I know that margin-left: auto; margin-right: auto; will center on the horizontal, but what is the best way to do it vertically, too?
95339
I really like the solution given in  but what to do if I want to keep the footer information of the casual style from page 2 on? That is, with this solution, I can put the header as I want in the first page, but the footer disappears from the rest of the pages and I do not want that.  I want the header of the first page to look like this (with an empty footer):   And the footer from the second page on to look like this:
7598
I'm posting today because I would like to reduce white space in a document I'm writing. The content is two-columns but I have floating tables that span across both columns (table*).   At some point, the text ends in the beginning of the first column of a new page. I would like to include my table on this page since it has a lot of free space below the text, but when I insert the table* right after the text, it goes to the top of the next page instead:    Do you know a way of obtaining the desired behavior?  Minimal working example :  \documentclass{article} \usepackage{lipsum}  \begin{document} \twocolumn  \paragraph{} \lipsum[1]  \begin{table*} \centering \begin{tabular}{|c|c|c|c|} \hline Column 1 &amp; Column 2 &amp; Column 3 &amp; Column 4 \\ \hline Column 1 &amp; Column 2 &amp; Column 3 &amp; Column 4 \\ \hline \end{tabular} \end{table*}%   \end{document}
89395
Currently I am posting this on a page without any CSS style. Anyone else experiencing this?  I am using Firefox 3.5.2 and have tried refreshing (CTRL + F5) multiple times, even closing the browser. I do have Stylish installed and was using it to create a Hot Dog Stand theme, but it was inactive when this happened.  Screenshot:
88644
In any tag's info page, the Tag Info box is overlapped with the above horizontal line. Adding some space in between them or adding margin-top to the tag info div will improve the page design.  For example, in the  tag info page.  Current UI:        Expected UI:
4073
how could i vertically center a &lt;div&gt; within a &lt;div&gt; ?  my code so far:  &lt;div style="height:322px;overflow:auto;"&gt;     &lt;div style="border: Solid 1px #999999;padding:5px;"&gt;     &lt;/div&gt; &lt;/div&gt;   i have tried "top:50%;" and "vertical-align:middle;" without success  EDIT: okay so it's been discussed a lot. and i've maybe started another mini flame war. but for argument sake, how would i do it with a table then? i've used css for everything else so far so it's not like i'm not trying to employ "good practices".  EDIT: the inner div does not have a fixed height
120630
We have a page layout for a custom object and want to put a Visualforce page as a section in it. However, the height of the content varies, and when I drop the section in, there is a large white space if the content does not fill. How do I deal with this (the part with the big red 'X' through it)?
120383
I have this test file which is supposed to put Hello there. near the top of the page but it does not work in so far as there is still tons of vertical space at top. How can I fix this?  \documentclass{article} \begin{document} \vspace{-10cm} Hello there. \end{document}
555
I have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other. One of the images needs to be absolute positioned within the div. What is the CSS needed for this to work on all common browsers? &lt;div id=&quot;header&quot;&gt;   &lt;img src=&quot;..&quot; &gt;&lt;/img&gt;   &lt;h1&gt;testing...&lt;/h1&gt;   &lt;img src=&quot;...&quot;&gt;&lt;/img&gt; &lt;/div&gt;
66335
(clickable)  Mainad has a valid height and width, however it isn't shown like subad1/subad2. Which are in essence exactly the same! (just a different background image).  Firebug shows my div as greyed out for some weird reason. Replacing the contents of mainad with just some text doesn't solve the problem (problem isn't related to inner elements)..   What's going on?! :(
67600
I am using style attribute to use media queries in lightning components something like this:  &lt;style&gt;   .legendBox {     background: none!important;     min-height: 50px;     padding: 5px 0px;     position: absolute;     width: 90%!important;     left:9%;     margin-top:-15.25%!important;     border:0px!important;   }    .bootstrap-sf1 .pre-scrollable {     max-height:none!important;                   overflow:none!important;   }  &lt;/style&gt;   My question is how to use these media queries in css section of lightning component. If possible please suggest the method as I am trying to submit the code for security review. Will it fail there?