I am having some trouble with my sticky footer. First of all, my content does not reach the entire bottom of the screen (even underneath the footer .. check on larger monitor). Also, when the window is smaller than the content, the header moves and does not expand 100% in width when you move the horizontal scrollbar. What am i doing wrong?
Here is my testing site: My Site
If you use firebug or Google Chrome's built in Inspect Element, you can see where all the elements are.
Here is some of the css:
.content
{
width: 1100px;
margin: 0 auto;
border-left:1px solid #000;
border-right: 1px solid #000;
background:#222;
min-height: 100%;
height: 100%;
padding-bottom:50px; /* Padding for footer (width) */
}
.contentInner
{
padding:0px 10px 0px 10px;
min-height: 100%;
height: 100%;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000; /* So you can see it */
}
Here is what it looks like when the content is bigger than the window:
I would also like the Content to extent all the way down the page with the content!
Edit / add your css like this to get rid of smaller screen issues..
.mainContainer {
min-width: 1100px;
}
To get that content background to continue all way down, i suggest using centered background image in .mainContainer and remove content background OR just set .content min-height to some large value like 900px OR use javascript to set content height if smaller than screen height.
if you put your .mainContainer to the width of your .content, it will work.
.mainContainer {
width: 1100px;
}
Is it what you want ?
Replace your CSS to this one.
.content
{
width: 100%;
margin: 0 auto;
border-left:1px solid #000;
border-right: 1px solid #000;
background:#222;
min-height: auto;
height: auto;
padding-bottom:50px;
position:absolute;
}
.contentInner
{
padding:0px 10px 0px 10px;
min-height: auto;
height: auto;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000;
}
Related
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I have a menu that will be run through a javascript and cause the menu to scroll to the top, lock in place, then expand a few pixels.
A live example would be something like this: http://www.kriesi.at/
Currently I have this:
http://jsfiddle.net/djtiii/7cauw/
HTML
<div class="space">
<p></p>
</div>
<div id="menu">
<div class="container">
<div class="pages">
<ul>
<li>Hi,</li>
<li>how</li>
<li>are</li>
<li>you?</li>
</ul>
</div>
<div class="icons">
<img src="http://thegraphicsfairy.com/wp-content/uploads/2014/01/Valentine-Fairy-Image-GraphicsFairy.jpg">
<img src="http://thegraphicsfairy.com/wp-content/uploads/2014/01/Valentine-Fairy-Image-GraphicsFairy.jpg">
</div>
</div>
</div>
CSS
body {
height: 600px;
min-width: 400px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
.container {
min-width: 380px;
max-width: 380px;
padding: 0;
margin: 0 auto;
}
.space {
height: 100px;
}
#menu {
min-width: 400px;
left: 0;
right: 0;
height: 60px;
border-top: 1px solid black;
border-bottom: 1px solid black;
position: absolute;
margin: 2px 0 0 0;
}
.pages {
height: 60px;
float: left;
border-right: 1px solid black;
border-left: 1px solid black;
}
.icons {
height: 60px;
min-width: 100px;
float: right;
border-left: 1px solid black;
border-right: 1px solid black;
}
.pages li {
line-height: 60px;
display: inline-block;
margin: 0 5px 0 0;
}
.icons img {
float: right;
height: 100%;
width: auto;
}
#menu.fixed {
position: fixed;
top: 0;
z-index: 999;
margin: 0 auto;
}
JavaScript
$(document).ready(function () {
var showStaticMenuBar = false;
$(window).scroll(function () {
if (showStaticMenuBar == false) {
if ($(window).scrollTop() >= 110) {
$('#menu').addClass('fixed');
showStaticMenuBar = true;
}
} else {
if ($(window).scrollTop() < 110) {
$('#menu').removeClass('fixed');
showStaticMenuBar = false;
}
}
});
})
The scroll effect "works", but is slightly broken since the content is fixed width. If the resolution is less than that width, then when the menu fixes to the top it cuts off information to the right. Are there any work around to force a position:fixed into a relative space?
Any stabs at this will be greatly appreciated. Thanks!
Not sure exactly what you are after here, but it looks like you need to look further into responsive web design.
A few css tricks here that may (or may not) help....
If instead of using a min-width and max-width, you set a width and a max-width of 100%, ie
.container {
width:380px;
max-width: 100%;
}
then the width will be 380px, but will then become 100% when the window is less than 380 pixels wide. At the moment, your container is always 380px (no point setting a min-width and max-width if they have the same value, just use width). This is why when the window resolution is smaller than 380px, it cuts off to the right.
To specify styles to use only when the window is below 380px (or any other resolution), you can use the code similar to the following.
#media screen and (max-width:380px) {
.container {
/* NEW STYLES HERE */
}
}
This means that you do not need to write a single style that works for all resolutions - you can tweak it for different resolutions. These are called breakpoints.
If you are using background images, you can scale these using the background-size css property, which allows them to be resized on different resolutions.
Change #menu.fixed to this left:0;right:0;top:0;z-index: 999;margin:auto;position:fixed;
I am displaying images in HTML control horizontally. The images TABLE is inside main DIV. CSS for DIV is as follows:
#main
{
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
The problem is that main DIV border is not extending and images are dropping out of it as shown in following screenshot:
Here is the HTML scippet:
<body>
<div id="main">
...
<table>
<tr id="image-list">
</tr>
</table>
...
</body>
Please suggest how to alter code so that DIV border automically increase its width as per images in it?
The issue which you are encountering - Demo
And this is what will fix the issue, am doing nothing fancy, I assigned width: 100%; to the table element, and than am using table-layout: fixed; which is important here, and than just use max-width: 100%; for your img tag... Also make sure you use width for your td elements as well...
Demo (Fixed issue)
#main {
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
img {
outline: 1px solid #eee;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
table tr td {
width: 33%;
}
table tr td img {
max-width: 100%;
}
give :
table{width:100%;}
as well as
#main
{
width: 100%; /*not auto*/
/*remaining css */
}
that would solve your problem
so, final css :
html, body {
width:100%; /* important */
height:100%; /* important */
margin:0;
padding:0;
}
#main {
width: 100%; /* changed*/
height: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
table{
width:100%; /* changed*/
height:auto;
border-collapse: collapse; /* added and very important*/
table-layout: fixed;/* added and very important*/
}
img{
width:auto; /* change as per your need */
max-width: 100%;
height:auto; /* important to maintain aspect ratio of images */
}
your problem
solution demo
Put this CSS in your stylesheet to fix it:
#main
{
width: 400px /*you can give fixed value or auto value*/;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
#main table
{
width:100%;
}
My question is about the layout in this image:
White box in upper right corner = content box
The black line at the bottom = footer bar
The box to the right = the sidebar box
The sidebar is set with CSS to position: fixed, so it will follow the users scroll.
The problem is, on small screen sizes, the user can scroll too far, meaning that the sidebar box, will go futher down than the footer bar.
How can I make the sidebar stop 20 pixels before hitting the footer?
CSS Code:
div#sidebar
{
margin: 20px 0px 20px 20px;
width: 270px;
height: 295px;
border: 1px solid #CCC;
background-color:#FFF;
padding: 20px;
position:fixed;
left: 730px;
}
div#content
{
margin: 20px 0px 20px 0px;
width: 650px;
height: 600px;
border: 1px solid #CCC;
background-color:#FFF;
float: left;
padding: 20px;
}
div#footer
{
width: 100%;
min-width:1024px;
height: 30px;
border: 1px solid black;
background:#252525;
text-align:center;
padding-top:10px;
color:#555;
}
I would try to adjust #sidebar margin-bottom. What's your HTML?
If you want the content box to stop getting larger with zoom i think you would have to use javascript. If i understand your problem correctly, that content goes over the footer. Try use this:
div#footer
{
width: 100%;
min-width:1024px;
height: 30px;
border: 1px solid black;
background:#252525;
position: relative;
text-align:center;
padding-top:10px;
color:#555;
}
Try bottom: 20px; property in your div#sidebar.
I have designed the header with the following CSS:
.Navigation { height: 84px; background: url(../images/Navigation.png) repeat-x; border-bottom: 1px solid #919191; }
#NavigationInside { padding-left: 15px; width: 945px; margin: 0 auto; }
This is fixed height and width header whereas I want it relative to the screen size. Both end of the header should touch the left and right corner of the screen.
Please help me out to make changes in the CSS.
.Navigation {
width:100%;
margin:0;
padding:0;
...