StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFooter Always in the bottom, and container stretching with it?
primarykey
Id
13911111
data
AcceptedAnswerId
0
AnswerCount
5
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-12-17T09:06:15.230
FavoriteCount
0
LastActivityDate
2012-12-19T09:59:48.303
LastEditDate
LastEditorUserId
0
OwnerUserId
1909420
ParentId
0
PostTypeId
1
Score
1
ViewCount
671
LastEditorDisplayName
text
Body
<p>Am trying to make my footer always in the bottom of my site, and the container stretch with it when there is no enough data to fill to fill the whole browsing site, and when data gets added to the menu or the information block the container will stretch with them moving the footer down.</p> <p>HTML Code</p> <pre><code><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>البوابة الإلكترونية للنظام الأكاديمي || جامعة نجران ||</title> <link href="int_styles_en.css" rel="stylesheet" type="text/css"> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <style type="text/css"></style> </head> <body> <div id="main"> <div id="header"> <div id="header-content"> <div id="logo"> <img src="images/en/logo.gif"> </div> <div id="header-menu"> <ul align="center" class="nav_ul"> <li><a href="index_en.html" class="navegator1"><span style="opacity: 0;"></span></a></li> <li><img src="images/colore-chng.png"></li> <li><a href="#" class="navegator3"><span style="opacity: 0;"></span></a></li> <li><img src="images/font-size-icn.png"></li> <li><a href="index.html" class="navegator5"><span style="opacity: 0;"></span></a></li> </ul> <div id="text-size"> <ul align="center" class="font-size"> <li><a href="#" class="font-size1"><span style="opacity: 0;"></span></a></li> <li class="font-last"><a href="#" class="font-size2"><span style="opacity: 0;"></span></a></li> </ul> </div> <div id="Colore-change"> <ul align="center" class="colore-butoons"> <li><a href="#" class="colore-butoons1"><span style="opacity: 0;"></span></a></li> <li class="color-last"><a href="#" class="colore-butoons2"><span style="opacity: 0;"></span></a></li> </ul> </div> </div> </div> </div> <div id="container"> <div id="right-elements"> <div id="main-menu"> <div id="main-menu-title"> <img src="images/en/main-menu-title.png"> </div> <div id="menu-text"> <ul> <li> <a href=""><span id="menuForm:t10"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;التقويم الجامعي</span></a> </li> <li> <a href=""><span id="menuForm:t12"><img src="images/en/arw.png" border="none" class="menu-text-first">&nbsp;&nbsp;المقررات المطروحة</span></a> </li> <li> <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a> </li> <li> <a href=""><span id="menuForm:t10"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;التقويم الجامعي</span></a> </li> <li> <a href=""><span id="menuForm:t12"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;المقررات المطروحة</span></a> </li> <li> <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a> </li> <li> <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a> </li> <li> <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a> </li> <li> <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a> </li> </ul> </div> </div> </div> <div id="left-elements"> <div id="content-block"> <div id="content-title"> <img src="images/en/news-title.png"> </div> </div> </div> <div style="clear: both"></div> </div> <div id="footer"> <div id="footer-content"> <div id="footer-logo"> <img src="images/en/footer-logo.png"> </div> <div id="footer-text"> <div id="copyrights"> <img src="images/en/copyrights.png"> </div> <div id="visits"> <h6>Portal Visits: 246781</h6> </div> <div id="design"> <h1>Designed And Developed By <a href="http://www.ats-ware.com">ATS-Ware.Com</a></h1> </div> </div> </div> </div> </code></pre> <p></p> <p></p> <p>CSS CODE</p> <pre><code>@charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; } html { margin: 0 auto; height: 100%; width: 100%; } body { margin: 0 auto; height: 100%; width: 100%; background-image: url(images/egg_shell.png); } /* ----------> FONTS Ids Start <---------- */ h1 { font-family: Tahoma, Geneva, sans-serif; font-size:10pt; font-weight: normal; } h2 { font-family:Tahoma, Geneva, sans-serif; font-size:10pt; direction:ltr; } h3 { font-family: Tahoma, Geneva, sans-serif; font-weight:lighter; font-size:11pt; } h4 { font-family: Tahoma, Geneva, sans-serif; font-weight:bolder; font-size:11pt; } h5 { font-family: Tahoma, Geneva, sans-serif; font-weight:lighter; font-size:10pt; } h6 { font-family: Tahoma, Geneva, sans-serif; font-weight:bold; font-size:10pt; } /* ----------> FONTS Ids End <---------- */ /* ---------> Body Starts Here <--------- */ /* ---------> Body Ends Here <--------- */ /* ---------> Header Starts Here <--------- */ #header { width:100%; height:127px; margin:0 auto; background:#e5e6e7 url('images/header_bg.gif') repeat-x; } #header-content { width:1000px; height:127px; margin:0 auto; } #logo { float: left; padding-left: 8px; padding-top: 11px; height: 94px; width: 396px; } #header-menu { float: right; width: 379px; padding-right: 7px; padding-top: 26px; height: 72px; } .nav_ul { width:500px; margin:0 auto; list-style-type:none; } .nav_ul li{ margin-right:21px; float: left; display:block; height:62px; } .nav_ul li a { background:url('images/en/nav.png') no-repeat scroll top left; width:59px; display: block; height: 62px; position: relative; } .nav_ul li a.navegator1 { width:59px; } .nav_ul li a.navegator2 { width:59px; background-position:-80px 0px; } .nav_ul li a.navegator3 { width:59px; background-position: -155px 0px; } .nav_ul li a.navegator4 { width:59px; background-position:-238px 0px; } .nav_ul li a.navegator5 { width:59px; background-position:-316px 0px; } .nav_ul a span { background:url('images/en/nav.png') no-repeat scroll bottom left; display:block; top:0; float:left; height:100%; width:100%; } .nav_ul li a.navegator1 span { background-position:0px -73px; } .nav_ul li a.navegator2 span { background-position:-80px -73px; } .nav_ul li a.navegator3 span { background-position:-155px -73px; } .nav_ul li a.navegator4 span { background-position:-238px -73px; } .nav_ul li a.navegator5 span { background-position:-316px -73px; } #text-size { height: 0; padding-left: 244px; position: absolute; top: 73px; } .font-size { width:56px; margin:0 auto; list-style-type:none; } .font-last { margin-left:17px; } .font-size li{ float: left; display:block; height:11px; } .font-size li a { background:url('images/font-size.png') no-repeat scroll top left; width:15px; display: block; height: 11px; position: relative; } .font-size li a.font-size1 { width:15px; } .font-size li a.font-size2 { width:19px; background-position:-37px 0px; } .font-size a span { background:url('images/font-size.png') no-repeat scroll bottom left; display:block; top:0; float:left; height:100%; width:100%; } .font-size li a.font-size1 span { background-position:0px -14px; } .font-size li a.font-size2 span { background-position:-37px -14px; } #Colore-change { height: 0; padding-left: 82px; position: absolute; top: 72px; } .colore-butoons { width:56px; margin:0 auto; list-style-type:none; } .color-last { margin-left:23px; } .colore-butoons li{ float: left; display:block; height:11px; } .colore-butoons li a { background:url('images/colore-buttons.png') no-repeat scroll top left; width:16px; display: block; height: 18px; position: relative; } .colore-butoons li a.colore-butoons1 { width:16px; } .colore-butoons li a.colore-butoons2 { width:16px; background-position:-40px 0px; } .colore-butoons a span { background:url('images/colore-buttons.png') no-repeat scroll bottom left; display:block; top:0; float:left; height:100%; width:100%; } .colore-butoons li a.colore-butoons1 span { background-position:0px -18px; } .colore-butoons li a.colore-butoons2 span { background-position:-40px -18px; } /* ----------> Header Ends Here <---------- */ /* ---------> Contaner Starts Here <--------- */ #main { height:auto; } #container { height: 100%; min-height: 450px; width: 1032px; margin: 0 auto; background-color: white; background: url('images/bg.png') repeat-y; } #right-elements { padding-top: 10px; padding-left: 25px; padding-bottom: 10px; width: 209px; float: left; } #main-menu { float: left; min-height:240px; height:100%; width:202px; background: #f5f5f5 url('images/block-head.png') repeat-x; -moz-border-radius: 0px 15px 0px 15px; -webkit-border-radius: 0px 15px 0px 15px; border-radius: 0px 15px 0px 15px; -moz-box-shadow: 0px 0px 10px #aca9b3; -webkit-box-shadow: 0px 0px 10px #aca9b3; box-shadow: 0px 0px 10px #aca9b3; } #main-menu-title { padding-top: 3px; padding-left: 5px; width: 137px; height: 23px; float: left; } #menu-text { float: left; direction: ltr; padding-top: 9px; position: relative; width: 100%; height: auto; } #menu-text ul { list-style-type:none; margin:0px; padding:0px; } #menu-text ul li { line-height:1.9em; border-top:dashed 1px #c6c6c6; padding:0px; } #menu-text ul li a { color: #0e3670; padding-left: 5px; display: block; font-size:10pt; font-family:tahoma, arial; text-decoration: none; } #menu-text ul li a:hover { color:#ffffff; padding-right:5px; background:url('images/en/menu-hover.png') no-repeat top left #31b6e5; } #menu-text ul li.menu-text-first { border-top:none; } #left-elements { float: right; width: 798px; } #content-block { float: right; height: 100%; width: 774px; min-height: 240px; margin-right: 23px; margin-top: 10px; background: #f5f5f5 url('images/block-head.png') repeat-x; -moz-border-radius: 0px 15px 0px 15px; -webkit-border-radius: 0px 15px 0px 15px; border-radius: 0px 15px 0px 15px; -moz-box-shadow: 0px 0px 10px #aca9b3; -webkit-box-shadow: 0px 0px 10px #aca9b3; box-shadow: 0px 0px 10px #aca9b3; } #content-title { direction: ltr; padding-top: 2px; padding-left: 5px; width: 700px; height: 33px; float: left; } #content_text { margin-top: 3px; margin-left: 9px; float: left; direction: ltr; } /* ---------> Contaner Ends Here <--------- */ /* ---------> Fotter Stars Here <--------- */ #footer { width: 100%; height: 90px; margin: 0 auto; background: #e5e6e7 url('images/footer-img.png') repeat-x; } #footer-content { width: 1000px; height: 90px; margin: 0 auto; } #footer-logo { float: left; padding-left: 9px; padding-top: 27px; height: 51px; width: 224px; } #footer-text { width: 333px; float: right; } #copyrights { float: right; padding-right: 7px; width: 333px; height: 17px; padding-top: 21px; } #visits { float: right; color: #FFFFFF; padding-top: 4px; padding-right: 7px; } #design { float: right; color:#b3b1b1; padding-top: 4px; padding-right: 7px; } #design a { color: #FFFFFF; text-decoration: none; } /* ---------> Fotter Ends Here <--------- */ </code></pre>
Tags
<html><css>
Title
Footer Always in the bottom, and container stretching with it?
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USRedCode
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

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.