Main markup
<body>
<div id="contenedor">
....
</div>
<div class="fLeft"> <footer > ... </footer> </div>
</body>
CSS
body{
}
#contenedor{ float: left; width:100%;}
.fLeft{ float:left }
I guess best way is to firebug the page..
http://209.51.221.243/integracion/login.php
As you can see, the footer is above the middle of the page behind the content...
At first, I thought it might be that you didn't clear your float. But then I noticed that each floated element is absolutely positioned. By applying position:absolute to an element, you're ripping it out of the flow of the document. The best way to fix this is to remove position:absolute from your "widgets", but then your design won't appear how you currently have it.
An idea/suggestion to workaround your limitations is to fix the footer to the bottom of the page. Apply the following to <footer>:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
You'll notice that your footer will stay put as you scroll on the page, and that can very possibly be less than ideal, but I can guarantee it'll stay on the bottom of the page. Otherwise, you're looking at reworking your styles because of the misuse of some properties.
You use floating divs before footer, so, in order to put the footer after those divs, the css of your footer should contain: clear: both;, or clear: left;, in your case.
Docs: http://www.w3schools.com/cssref/pr_class_clear.asp and (of, course) https://www.google.com/search?q=css+clear :)
UPDATE2: I realized I was wrong. This answer does not work in this particular case.
First: This is a pretty good starting point for any footer. Use it.
Second: You may have noticed that the container that has all the floating boxes (.centerCnt) isn't big enought to fit them all. To fix this you need to use a good .clearfix. There are many to choose from, but I use this one:
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
You will need this on .centerCnt otherwise the Sticky Footer won't work.
UPDATE: Simply using the clearfix would probably fix your issue. Add the code above to your CSS and give .centerCnt the class clearfix.
Related
I use this code on my test page to clear header-container float, but doesn't work. Can I force it somehow?
#header-container{
position: relative !important;
clear: both !important;
overflow: auto !important;
}
Use this approach:
#header-container:after {
content: ' ';
line-height: 0;
display: block;
clear: both;
*zoom: 1; /* trigger hasLayout for IE 6/7*/
}
I also suggest to take a look at talented Nicolas Gallagher's Micro clearfix
Update:
Per the OP's explanations, (at the comments below):
That header-container floats on top and stays there when i scroll and
i don't want that.
That is not a clearing fix issue, None of #header-container's children are floated.
The point is the .viewitem-panel and .viewitem-inner elements are positioned to stay at the bottom of the page, right under the header, and .viewitem-inner has a overflow-y: scroll; CSS declaration to scroll the content.
So, This problem can not be resolved unless the layout is changed.
place clear in a separate class
.clearfloat{clear: both}
and then place it after the div you wanna clear float
<div id="header-container">
</div>
<div class="clearfloat"> </div>
I came across with a weird thing lately with overflow: hidden;. I set it to an element, and then I want to transform the elements in it with translate(), when it translates in negative direction it will be hidden, but if I translate in the positive direction, it won't be hidden. In desktop browsers it's not really showing, but you can reach it with a little bit of mouse work. And on mobile it's just scrolls, so that is the worst.
Here is an example showing it: http://cssizer.com/KLHlPShW
So I've been working with something similar all day and realized that while I had
html, body {overflow:hidden; }
...if I add position:absolute, position:relative or position:fixed to the html and body, it fixes the issue.
I wrap everything in a container div with the following code. Explicitly set overflow appropriately in both directions. This keeps the X-axis from scrolling in iOS Safari, even if there are elements translated to the right of the main content area.
But scrolling performance is significantly degraded unless you add -webkit-overflow-scrolling: touch;. It took me a long time to find this! Hopefully it helps someone else.
.scrollContainer {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
I had the exact same problem, and here is how I fixed it:
HTML
<div id="container"> <!-- defines "boundaries" of content -->
<div id="content"> <!-- part of it must be hidden -->
</div>
</div>
CSS
#container {
overflow: hidden;
z-index: 2;
}
#content {
/* Translation code ...*/
z-index: 1;
}
Here is a JSFiddle.
Sadly the above solutions didn't work for me.
In my case it did respect overflow: hidden when used on html.
So for those people with the problem of translate extending the viewport:
html {
overflow-x: hidden;
}
I am using the sticky footer script from (Ryan Fait website) which works great, but the moment I resize my browser (or minimize it) the footer pushes to the top over other text, and breaks completely.
I have a live example at (sports and events website)
Any ideas on how I can fix this?
Define your ID #mian_content :overflow:hidden;
as like this
#main_content {
overflow: hidden;
}
Result is this
You forgot to add clear:both to your #footer, .push rule. Add in the css as below and it will work.
#footer, .push {
height: 202px;
clear: both; /* add this */
}
I have the following:
<div id="tab-notes" class="clearfix">
<textarea cols=100 rows=15 class="full-width" id="dialogNotes" name="Pages">#Model.Notes</textarea>
</div>
I have added a clearfix class but it seems that the DIV does not stretch to fit the height of the textarea. Is there something simple that I am missing?
.clearfix:after, .block-controls:after, .side-tabs:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
giving your #tab-notes a background-color you'll see that it does stretch to the textareas high (like it should) if there really aren't any other css-rules that affect these elements.
you can see it in action here: http://jsfiddle.net/Mqke4/
the clearsfix seems to be senseless just given this snippet and doesn't change anything ( http://jsfiddle.net/Mqke4/1/ ). given this, there must be styles defined for .full-width, #tab-notes, #dialogNotes (or anything like that) causing this problem.
Is your textarea applied with float: left or float: right ?
If so, remove the float property from textarea.
But if you have to use that property,
the easiest way to solve the problem is to also apply the float: to your div too.
Or you can change the display type of your div to block by using display: block
There's more way to solve this problem.
But I think these are the easiest ones.
I am having the hardest time trying to figure out this (should be) simple css:
Website is here:
http://mibsoftware.us/fct/index.php
I'm simply trying to get my #leftcolumn and #maincolumn to be inside the #content_container, yet whatever I'm doing isn't working at all. I'd like for the #content_container to be a dynamic height since the height of #leftcolumn and #maincolumn change depending on the page you are on.
From the framework of my css it should work fine, so I must be missing something in my .css file declaring these divs. Any help would be greatly appreciated, as this will be a great learning experience for me.
Set overflow:hidden on your #content_container.
Here is a nice resource to learn more about clearing floats and such.
You could also set .clearfix class on your #content_container and define it in CSS like this:
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix, .container {display: block;}