Databases
StackOverflow2013
Postsdbo
POCSS Div Footer Strange Behaviour
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Div Footer Strange Behaviour
    primarykey
    data
    text
    <p>The idea to develop my own blog's theme just poped into my mind, probably I enjoy making my own things, but I have very little experience in CSS and HTML, so I've run into some weird problems already.</p> <p>Actually, it's about the footer. I've written a large piece of code and now I'm trying to trace back the problem, but no results yet. I've used the search here, analyzed some of the similar problems, still no result. Even wrapped everything still nothing.</p> <p>What I'm trying is to make footer appear at the very bottom of the page content but it always pops on the bottom of the browser's window (somewhere in the middle of the content). Could you guys take a look at the code - I'd really appreciate help, because I've heard there are some good coders <em>slash</em> helpers here.</p> <p>Please, do not take me as an idiot or something like that. Newbie, that's who I am! Just that.</p> <p><strong>Styles.css</strong></p> <pre><code>h tml{ min-height: 100%; } body { margin: 0; padding: 0; font: 16px Georgia; line-height:25.88854px; color:#222222; height:100%; } #wrapper { min-height:100%; position:relative; } #footeris { position: absolute; bottom:-20px; height: 100px; min-width: 100%; background: #00a651; } #blogheader { min-width: 100%; height: 55px; background: #00a651; position: fixed; z-index:3; } #menu { width: 900px; height: 55px; background: #00a651; display: block; margin: auto; } #social { width: 200px; height: 55px; display: block; float: right; margin: auto; } #twitter { margin-top:12px; margin-right: 15px; float: right; } #twitter:hover { margin-top:15px; } #googleplus:hover { margin-top:15px; } #youtube:hover { margin-top:15px; } #googleplus { margin-top:12px; margin-right: 15px; float: right; } #youtube { margin-top:12px; margin-right: 15px; float: right; } #menubutton1 { display:inline-block; height:55px; background: #00a651; } #menubutton1:hover { background-color:#000000; } #navigacija { width: 600px; height:55px; float: left; padding:0; } #navigacija li { display:inline; } #navigacija li a { font-family:Arial; font-size:20px; font-weight: bold; text-decoration: none; letter-spacing: 1.5px; padding-top:100%; padding-bottom:14px; padding-left:18px; padding-right:18px; background-color: #00a651; color:#ffffff; } #navigacija li a:hover { background-color:#000000; } #name { position:relative color: #FFFFFF; padding-top: 18px; padding-left: 9px; padding-right: 9px; height:55px; } #name a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; } #line { margin-left: auto; margin-right: auto; height: 7px; background: #C9C9C7; } #blogbody { width: 1024px; min-height:100%; margin-left: auto; margin-right: auto; padding-bottom:60px; z-index:2; } #myinfo { float: right; max-width: 300px; background: #DDE3DC; z-index: 1; border-bottom: 2px solid #cccccc; display:inline-block; } #myinfotext { margin-bottom: 20px; font: 17px Georgia; line-height:25.88854px; color:#222222; text-align:left; padding-left:40px; } a { color: #00a651; text-decoration: none; } h1 { font-size: 25px; font-weight:normal; font-family: Helvetica Neue; color: #474A46; } #me { margin-left:auto; margin-right:auto; background: url(images/me.png) no-repeat; width: 120px; height: 120px; } #content { width: 615px; float: left; margin-top: 55px; min-height:100%; } #blogprojects { width: 615px; height: 200px; display: block; float: left; padding: 20px; border-bottom: 1px solid #cccccc; } #newsfeed { width: 615px; float: left; padding: 20px; padding-top: 15px; } #blogpost { width: 615px; float: left; padding: 20px; } #blogsidebar { width: 300px; min-height: 100%; background: #DDE3DC; display: block; float: right; border-left: 2px dashed #cccccc; padding: 25px; margin-top: 55px; z-index:1; } #blogwidget { margin-top: 20px; width: 300px; display:inline-block; border-bottom: 2px solid #cccccc; } #blogwidgetcontent { margin-bottom: 20px; } </code></pre> <p><strong>HTML Code</strong></p> <pre><code> &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Lukas Valatka Blog&lt;/title&gt; &lt;link rel="stylesheet" href="styles.css"&gt; &lt;/link&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="blogheader"&gt; &lt;div id="menu"&gt; &lt;div id="navigacija"&gt; &lt;ul id="navigacija"&gt; &lt;li&gt;&lt;a href="#"&gt;POSTS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="social"&gt; &lt;div id="twitter"&gt; &lt;a href="https://twitter.com/a" title="Visit my Twitter"&gt;&lt;img src="images/social/twitter.png" alt="Twitter" &gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="googleplus"&gt; &lt;img src="images/social/googleplus.png" alt="Google Plus" &gt; &lt;/div&gt; &lt;div id="youtube"&gt; &lt;img src="images/social/youtube.png" alt="Youtube" &gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="line"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="blogbody"&gt; &lt;div id="content"&gt; &lt;div id="blogprojects"&gt; &lt;h1&gt;Recent Projects&lt;/h1&gt; test &lt;/div&gt; &lt;div id="linijele"&gt; &lt;/div&gt; &lt;div id="newsfeed"&gt; &lt;h1&gt;What's Going On&lt;/h1&gt; &lt;div id="blogpost"&gt; &lt;h2&gt;Test&lt;/h2&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus, ante at gravida condimentum, nibh eros bibendum dolor, non aliquam augue velit sit amet lectus. Phasellus pellentesque diam quis metus fermentum sollicitudin. Suspendisse suscipit, enim quis ultricies congue, lectus sem luctus orci, non lacinia nunc ante non augue. Praesent at ante lectus. In quam magna, eleifend ornare facilisis sed, dignissim a nunc. Nullam ultricies vulputate lorem nec sagittis. Nullam vulputate nisi vel lorem pharetra volutpat. Suspendisse dui est, consectetur malesuada consequat nec, egestas et lorem. Nulla facilisi. Maecenas eleifend pulvinar tincidunt. Donec eu orci at libero ultricies ornare. Suspendisse potenti. Nullam tortor ante, rutrum ut sollicitudin at, pulvinar vel orci. Sed semper sem tincidunt urna cursus et ultrices tortor aliquet. Vestibulum pellentesque arcu dictum nisl mollis auctor. Proin ut vehicula risus. Nulla ut urna sit amet neque commodo venenatis. Nulla hendrerit tincidunt tellus, congue convallis orci porta non. Nam sollicitudin ultricies dui, id dignissim odio tempus eu. Fusce viverra condimentum euismod. Suspendisse mauris magna, pulvinar venenatis porttitor id, interdum a purus. Donec nisi augue, semper eu fermentum ac, blandit at justo. Phasellus aliquet ultrices dapibus. Donec nibh libero, tempus ut pellentesque a, aliquet ut libero. In hac habitasse platea dictumst. Nam eget nunc lectus, in commodo odio. Nulla a justo nunc, quis sollicitudin ante. Proin mi magna, tempor sit amet porttitor volutpat, luctus eu sem. Vestibulum porttitor arcu eget magna vulputate quis laoreet massa mollis. Maecenas justo nibh, ornare elementum ornare quis, aliquam sit amet velit. Cras hendrerit consequat viverra. Aenean eget libero at urna viverra rutrum. Fusce eleifend tincidunt dignissim. Nam pellentesque aliquam lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam massa nisl, luctus sollicitudin congue non, suscipit ac justo. Morbi pretium elementum urna, et dignissim lectus viverra vel. Duis sit amet massa felis, ut consequat dolor. Nullam in justo lectus, id rutrum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent fringilla urna rutrum orci dignissim a mollis leo varius. Vivamus accumsan neque a nisl ornare vel ultricies eros ultrices. Quisque nec odio non libero pellentesque molestie in ut quam. Phasellus feugiat consequat nunc, commodo venenatis tortor volutpat eget. Curabitur tristique posuere mollis. Quisque sit amet lacus nec elit fermentum laoreet sed vitae neque. Sed sem leo, fermentum eu sagittis in, auctor eget lacus. Duis lacus orci, semper vitae faucibus vitae, bibendum ac augue. Curabitur at felis ac mi dictum adipiscing. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="blogsidebar"&gt; &lt;div id="myinfo"&gt; &lt;div id="me"&gt; &lt;/div&gt; &lt;center&gt; &lt;h1&gt; &lt;a href="http://"&gt;L&lt;/a&gt; &lt;/h1&gt; &lt;div id="myinfotext"&gt; Hey &lt;/div&gt; &lt;/center&gt; &lt;/div&gt; &lt;div id="blogwidget"&gt; &lt;div id="blogwidgetcontent"&gt; &lt;h1&gt; Latest Tweets &lt;/h1&gt; &lt;a class="twitter-timeline" data-tweet-limit="3" href="https://twitter.com/" data-widget-id="3168357470"&gt;Tweets by @L&lt;/a&gt; &lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");&lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footeris"&gt;Copyright 2013.&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLukas Valatka
    1. USLukas Valatka
    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. This table or related slice is empty.
    1. COHave you tried to remove the absolute positioning?
      singulars
      1. POCSS Div Footer Strange Behaviour
      1. USAnton Garcia Dosil
    2. COYeah, but it results in footer floating under the header bar (which is fixed), somewhere on the top of the screen.
      singulars
      1. POCSS Div Footer Strange Behaviour
      1. USLukas Valatka
    3. COBut when I remove relative in wrapper, it just pops into the middle while leaving it be makes it appear below header line.
      singulars
      1. POCSS Div Footer Strange Behaviour
      1. USLukas Valatka
 

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