I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT:
Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.
Add the following CSS to #footer:
bottom: 0;
height: 90px;
Add the following CSS to A:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
#media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}
Related
I've looked around and can't seem to find a solution to the problem.
How come the bottom two divs appear cut in perfect halves to the left and right on a windows 8, but on my android s5 it is not centered?
http://danny4help.com/
#grad4_left img {
height: 100%;
width: 100%;
border-radius: 10px 0px 0px 10px;
}
#grad4_right {
z-index: inherit;
height: 700px;
background-color: #F1EEF7;
top: 705px;
width: 50%;
left: 50%;
text-align: center;
font-size: 80px;
line-height: 40px;
color: #4A4A4A;
}
.grad#grad4_left {
z-index: inherit;
height: 700px;
background-color: black;
top: 705px;
right: 50%;
color: #4A4A4A;
width: 50%;
}
You have several divs that have fixed widths in pixels, both above and below the incorrectly centered divs. These divs are wider than the body, so the viewport automatically expands to show the full width of those elements, making it seem as though your divs are incorrectly centered. Simply replace the pixel units of the width of the too wide divs with either percents of viewport units and you'll be good to go (e.g., .grad has a width of 1280px. Change that to 100vw). For a quick and dirty fix, add this block to the top:
* {
max-width: 100vw;
}
EDIT: Some other answers are advising you not to use absolute positioning in responsive layouts. Using position: absolute is actually OK as long as you are using relative units (e.g., %, em, vw) and not fixed units (e.g., px, in, pt).
Actually it's already centered in mobile. The reason why you see it's not aligned center is because you have set your grid div to width: 1280px while the body element is only 100%. Also as #Michael_B mentioned, besides having no height, it can't get the width of your elements inside your body element. I would advise you to not build a layout solely with position: absolute elements, because it will be better for responsive layouts, and I assume that you are targeting mobile.
Anyway, below are the few fixes I can suggest to you.
html, body add width 100%
.grad remove width
.grad1 remove height
.grad#grad1 img add max-width to 100%, add display: block
#shade remove position: absolute, remove width
#grad1.grad #scrolling_text change to width 100%
#block_text remove width
#nested_skills change to font-size: 16px so that your grad3 div can take the width of your text
.grad#grad4_right add overflow-y: scroll. If you do not want to have the scrollbar then set height: auto but it will be a different height than the image on the left. Also it will not show the left margin on the left div as well as the right margin on the right div because you are using absolute.
.grad#grad5: you have to adjust the font size for this yourself
.grad#grad6 add left: 0; right: 0; margin: 0 auto
.grad#grad7 add display: block
This should be good.
i want do fixed page height without scrolling, header fixed on top, and fill center to the remainder of the page. Center area will be have own scrolling bar when content overflow.
I set height 100% for central div, but this height ≠ height free space between top and bottom blocks.
What can i do? Many thanks!
Look code on jsfiddle
I have made a js fiddle which i have created with the points that i have understood from your problem.
I am using jquery $( window ).height() for getting browser viewport height.
By subtracting the height of header and footer (50px + 50px =100px) from browser viewport height i will get the height of extra space.
This height will be equal to the content height.
check the fiddle
http://jsfiddle.net/bnx4uuse/1/
html,body {height:100%; }
* { padding: 0; margin: 0; }
body { border:1px solid blue; }
#head {background-color:#FC6; height:50px;position:fixed;top:0px;width:100%;}
#center {background-color:#3CC; height:100%;margin:49px 0px; }
#foot {background-color:#9C0; height:50px;position:fixed;bottom:0px;width:100%;}
fiddle: http://jsfiddle.net/9xrz9mbf/4/
Add a wrapper div around your center div.
Set it to full screen and pad:
height: 100%;
width: 100%;
padding-top: 150px; /* size of your header */
padding-bottom: 100px; /* size of your footer */
On your center div you set overflow:
overflow: auto
The overflow property hides the extra content and adds a scrollbar to your div.
You header will have:
height: 150px; /* your desired size */
position: fixed; /* or absolute */
top: 0px;
Your footer will have:
height: 100px; /* your desired size */
position: fixed; /* or absolute */
bottom: 0px;
Then you have a "full-screen" app (full-window in that case)
As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
This is the only way I've found: like #DreamTek said:
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.
FLUID WIDTH
.wrap {
background: #ccc;
width: 90%;
height: 1000px;
}
.fixed {
position: fixed;
top: 10px;
right: 0;
background: #333;
height: 100px;
width: 10%;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
FIXED WIDTH
.wrap {
background: #ccc;
width: 200px;
height: 1000px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 20px;
right: 50%;
background: #333;
height: 100px;
width: 50px;
margin-right: -160px;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
A note about CSS positioning.
FIXED
Element is always positioned relative to the screen.
ABSOLUTE
Element is positioned relative to the nearest parent container with a position attribute.
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
I hope I've explained it well! :-)
You can also use calc() to achieve this. (supported in IE9+):
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
I cannot get positioning, max-width, and 'right: 0px' to work together in harmony! I'm creating a div that is fixed on my site in the upper right corner. The content of the page has a max-width of 1000px, however the label only obeys my rule of 'right: 0px' and sticks to the right, disobeying once max-width has been reached. It should also be noted that by default, the div is in the upper left and obeys the max-width (if I type 'left: 0px;' though, it does not obey the rule and it sticks to the left).
CSS:
#content {
margin: 0 auto;
max-width: 1000px; }
#div {
width: 150px;
position: fixed;
right: 0px; }
Here are some alternatives that I've already tried:
width: 100% (with text-align: right) <--- not quite right, and I don't like the 100% width as opposed to 150px
adding code to position the div "manually" in the html (not CSS)
I've discovered that float and text-align don't affect to fixed positioning
Help is greatly appreciated! Thank you.
If I understand correctly, this is what you're after.
You need to add a container with an absolute position to get the content over to the right and then use a fixed position container to keep it top right where you need it.
Alternative if you don't want to add additional absolute container
#div {
width: 150px;
position: fixed;
right: calc(50% - 500px); /* will move the div as far as 50% of viewport
then move it back to 500px (that is half of max-width) */
}
/* if needed, you can add media query */
#media (max-width: 1000px) {
right: 0;
}
I got it working with no problem in a jsfiddle. You may want to look around at the CSS that is affecting the area. You may have an issue if #content is not a block level element (no width will be applied and such. More code from you would be greatly helpful so we know exactly what is going on and can help you out more.
I think you need this one:
#content {
margin: 0 auto;
max-width: 1000px;
height:20px;
background:yellow;
position: relative;
}
#div {
width: 150px;
position: absolute;
right: 0px;
}
position:fixed is not relative to any container. It is relative to the html element of the DOM. That is the reason you're seeing it at extreme right whatever you do to the #content.