Databases
StackOverflow2013
Postsdbo
POCentering Div Element vertically
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCentering Div Element vertically
    primarykey
    data
    text
    <p>I am working on a very basic website template with a fixed header at the top left and a fixed bottom line at the bottom left and right.</p> <p>The content in the middle is supposed to be centered and I just can't quite figure out what I am doing wrong.</p> <p>Question 1.) Why does vertical centering not work if I remove the <code>height: 100%</code> css property?</p> <p>Question 2.) When <code>height: 100%</code> is declared on the html tag, why is the site bigger than 100% and extends beyond the browser window?</p> <p>Question 3.) Why is <code>bottom-left</code> displayed correctly, but not <code>bottom-right</code>?</p> <p>Question 4.) If with is set to 100% and text align to right, shoulnd't text start at the right browser frame and extend to the left? why is it extending the browser windows?</p> <p>Thanks so much for helping out. Code is visible below</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; html { height:100%; } body { height: 100%; margin-left: 20px;‚ } .title { position: absolute; top: 20px; font-family: serif; font-size: 20px; text-align: left; } /* Center Text Section */ .area { width: 100%; height: 100%; position: relative; } .middlespace { position: absolute; left: 50%; top: 50%; display: table; } .middlespace p { display: table-cell; vertical-align: middle; text-align: center; } .exhibitionindex { text-align: center; width: 500px; margin-right: auto; margin-left: auto; } .bottom-left { position: absolute; bottom: 15px; text-align: left; } .bottom-right { position: absolute; bottom: 15px; text-align: right; } .exhibitiontitle { color: #d4d4d4; font-style: italic; font-family: sans-serif; font-size: 10px; text-align: center; } .bold { font-family: serif; } .about { font-size: 11px; } .contact { font-size: 11px; } .openinghours { font-style: italic; color: #8e8e8e; font-size: 11px; } &lt;/style&gt; &lt;title&gt;Website Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="title"&gt;Logo / Title Text&lt;/div&gt; &lt;div class="area"&gt; &lt;div class="middlespace"&gt; &lt;p&gt;27. April 2012&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="bottom-left"&gt; &lt;span class="about"&gt;&lt;span class="bold"&gt;XYZ&lt;/span&gt; is a project by Person One, Person Two, Person Three&amp;nbsp;&amp;nbsp;&amp;#124;&amp;nbsp;&lt;/span&gt; &lt;span class="contact"&gt;Website Information &amp;mdash; &lt;a href="mailto:info@info.com"&gt;info@info.com&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="bottom-right"&gt;&lt;span class="openinghours"&gt;Opening Hours Information&lt;/span&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRoland
    1. USRoland
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCentering Div Element vertically
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POCentering Div Element vertically
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COFirst of all, you've got some extra curly brackets in there. I would clean those up before doing anything else.
      singulars
      1. POCentering Div Element vertically
      1. USJeff B
    2. COthanks Jeff! taken care of those.
      singulars
      1. POCentering Div Element vertically
      1. USRoland
    3. COThis: `<span class="openinghours">Opening Hours Information/span` is not closed properly.
      singulars
      1. POCentering Div Element vertically
      1. USZuul
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload