Databases
StackOverflow2013
Postsdbo
POsticky footer with a 2 column main content layout
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POsticky footer with a 2 column main content layout
    primarykey
    data
    text
    <p>Hi all I am having trouble getting my footer to stick to the bottom of the page. I have followed all the usual advice but my left column seems to expand beyond it's container div, which consequently pushes the footer off the bottom of the page. I have a fairly complicated layout since I have a fair amount of collapsible panels via jQuery but I'll give you the basic structure. </p> <p>Basic HTML: </p> <pre><code>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="content_header"&gt; &lt;!-- collapsible top panel --&gt; &lt;/div&gt; &lt;div id="show_content_header"&gt; &lt;!-- tab shown to expand top panel when minimized--&gt; &lt;/div&gt; &lt;div id="content_left_panel"&gt; &lt;!-- collapsible left panel --&gt; &lt;/div&gt; &lt;div id="show_left_panel"&gt; &lt;!-- tab shown to expand left panel when minimized --&gt; &lt;/div&gt; &lt;div id="main_content"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And the CSS: </p> <pre><code> body { height: 100%; margin:0; padding:0;} html, body, #container { height: 100%; } body #container { height: auto; min-height: 100%; } #content_header { position:fixed; width:100%; left:0; height:200px; background:url(../images/image.png) repeat-x; border:1px solid #000; z-index: 100; } #show_content_header { position:fixed; z-index:2; display:none; width:100%; height:40px; top:40px; left:0; } #content_left_panel { position: absolute; top: 235px; left: 0px; width: 200px; /*Width of frame div*/ height: auto; /*usually 100%*/ overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ z-index:0;} #show_content_left_panel { position:fixed; left:0; float:left; padding-top:5px; display:none; width:0px; height:30px; cursor:pointer; top:90px;} #main_content { position: relative; margin-left:210px; margin-top: 235px; margin-right:10px; margin-bottom: 100px; height: 100%; overflow: hidden; z-index:0;} #footer { position: relative; z-index: 100; height: 100px; margin-top: -100px; width:100%; background:url(../images/image.png) repeat-x; clear: both;} </code></pre> <p>As I said my footer remains at the bottom of page when the 90% of the time, but as soon as the #content_left_panel exceeds the height of the main content then the footer no longer remains at the bottom of the page, rather it is rooted to the bottom of the container div. I am confused as the #content_left_panel is breaking out of the container I am guessing it is something to do with it being a float!</p> <p>Any help is much appreciated! </p> <p>Cheers</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAlly
    1. USAlly
    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. POsticky footer with a 2 column main content layout
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI think we'd need to see the problem in action to fix the issue. Do you have this coded up and publicly visible?
      singulars
      1. POsticky footer with a 2 column main content layout
      1. USAlex
    2. COunfortunately not, but as I said as soon as the #content_left_panel's height surpasses the #main_content height it breaks. The container div height seems to be determined by the #main_content and pays not attention to the #content_left_panel...
      singulars
      1. POsticky footer with a 2 column main content layout
      1. USAlly
 

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