I inserted tabs into a Wordpress theme and they are made of divs of different heights. When navigating from one tab to another, a few of the divs below follow the height of the tabs (moving up or down).
The footer doesn't move and I don't understand it.
Here is my website:
http://www.liveaerosmith.com/1973-03-20/
You can try by navigation the tabs INFO, SETLIST and FILES. Why is the footer staying put?
There is a fixed height set on the two columns on the page. If you remove this pixel height, the footer will adjust as you change the tabs.
try adding this to your css:
.col-md-8, .col-md-4{
height: unset !important;
}
You have a fixed height on col-md-8.
.col-md-8{
height: 944px;
}
You footer is directly up against the bottom of this element, but by setting a fixed height, it doesn't allow the col-md-8 to rescale based on the content within.
Related
I have decided to add a sidebar to the left side of all my pages in my website. The sidebar can either be concealed or visible, I do not want it to overlap the existing page.
If I were to have a sidebar as such, the content of the page tends to overflow with the container. I need the content to change according to its container width rather than the browser width.
I do not want to create a container for the content and set overflow-y to auto and make it stretch to browser height as I would need to do this for all my pages...
I have already tried changing the left margin on the body and adding a div with position: fixed as a sidebar.
How would I go about changing the content according to its container width rather than the browser width?
Try something like the approach below:
#content {
width: 80%; /* Adjust as need */
position: relative;
}
#content .children {
max-width: 100%; /* Or less, to keep the children from overflowing */
}
Note: I used imaginary ID and Class
I'm rather new to html and css and I'm currently stuck with two annoying problems.
Unless my header's position is absolute it won't cover a small area above and beneath itself. But when the position is absolute the container beneath it partially goes behind the header.
I want my header to cover the same area as it does when it's position is absolute, but I want the container's position to automatically be right beneath the header.
When I divide the footer in half, for "Start" to be on the left side and "Contact" on the right side, and add the Copyright part as a float:right everything else on the line gets pushed to the side.
I want "Start" and "Contact" to expand from the middle, out to the sides, while the Copyright part is to the far right. Everything on the same line.
The header's opacity is only to show the problem.
The line in the middle is to make sure the footer's text is in the middle.
I want to avoid a scroll bar.
https://jsfiddle.net/swvyrLnf/
header {
width: 100%;
opacity: 0.5;
position: absolute;
top: 0;
background-color: black;
color: white;
text-align: center;
}
For the header: Set the header height to 100px. Then set the margin-top of your body to 100px.
For the scroll bar: This is partially determined by the height of the body. If you want to avoid the scroll bar then you will probably need to change the body height from 100%.
For the Contact/Share links: I'd add padding left/right so that they separate from one another. To make them stretch farther you could change the size of the text. Another option would be to put them in a container of say width 40% and make the whole container a link.
The header should have overflow: hidden; and then you are fine. It's because the items inside have margin that extends the container.
My situation is that I have fixed position div with percented height at the bottom of page that is on top of it(see picture). The issue is that when I scroll page to the end, some of its content is hidden beneath this div. I think I should add empty element at the bottom of page, but what is the best way to do it?
A nice solution could be to change the height of the fixed div to be expressed in vh not in % (see), for example:
div.fixed-at-bottom { height: 20vh; .... }
and then set a margin-bottom to your contents div with the same value (or a little more to get more space):
div.content { margin-bottom: 22vh; .... }
I created a jsfiddle to present that.
I cant seem to find how to place a div (footer) at the bottom of the PAGE not the SCREEN. Many answers I saw say things like absolute of fixed but that brings the footer to the bottom of the screen and in the middle of my page.
HTML
<div id="footer"></div>
CSS
#footer{
bottom: 0;
}
So to make the question short: How do I place a footer on the bottom of the page not screen.
do you think on sticky footer? :)
or you just want footer after content, just make
footer {
position: relative;
}
If you use position:absolute; the footer will be ON the other elements and will not follow the page's element order. Than, if you use position:fixed;, sure it will be in a FIXED position, and this is not your desired result.
So DONT USE position absolute or fixed;
If your footer is the last element of the page, it will be the last element of the page automatically.
If you get the html and can't modify it manually, you can do it with JS (and JQuery but it is possible without it): jsFiddle
$(function() {
$('body').append($('#footer').detach());
});
If you don't assign any style to your footer and keep it as the last element after your body content, it will remain at the bottom of the page.
Assuming your body content is too short to cover the full height of the page (for whatever reasons, maybe no content) but you still want to keep the footer at the bottom of the page, you can read this short tutorial or see the demo. If your content is longer than the viewport height, this footer will still remain at the bottom of the page and not fixed to viewport.
Basically you need to make the content or container above the footer to occupy 100% of the height of viewport. Then, place the footer after the content / container with the following CSS :
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
What happens here is that the footer will occupy 3em height but you 'pull' it back with the same value but negative margin-top. It's cleared to make sure there's no elements on both sides but you may exclude that.
Then, to prevent it from overlapping on your content, the container of content or content itself should have padding-bottom of the same value (in this case, 3em).
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.