Footer is in the middle of the screen - html

I'm trying to make a layout where the footer is always at the end.
However, the HTML body should have a div fixed to the left and right split another with the remaining size.
Until then I have no problem ...
But when the right div has many lines of HTML not generally continues until the end, and the footer is in the middle of the screen.
When # main is with position: relative; happens the error, but if you take it, the speakers do not work the way I need.
I've tried everything and could not fix.
Example here:
http://jsfiddle.net/WzE3g/
#principal
{
width:100%;
float : left;
word-wrap: break-word;
/*display: block;*/
position:relative;
/*position:inherit;*/
bottom:0;
}

Use position:fixed; instead of absolute in #rodape element. This way it will be always at the the end.

I think you are talking about the sticky footer...
Here is an example with the explanation

Related

Properly position footer

I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).

Centering a fluid absolutely positioned section

So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen

div in position fixed with image under div with main content

i need to create a div in position fixed where i will put the image under a div with the rest of the content
i have put in my CSS header {
margin-bottom: 310px;
} to create a blank below space where there is gonna be my img in the div id="background" in position fixed below.
So then i have created the following id:
#background {
position:fixed;
width:100%;
height:100%;
top:130px;
left:0;
z-index: 1;
overflow:scroll;
}
and
#content {
width:100%;
height:100%;
top:60px;
left:0;
z-index:2;
overflow:scroll;
}
The id background is supposed to be the div where my image is gonna be placed right in the blank space l after the header, the id content is the div where i am gonna have my page content and it start from the top.
Here the page : http://fiddle.jshell.net/CGJmE/4/
The effect i want to achieve is exactly this : http://tommywebdesigner.com/Home%20Page.html
but using the div to gain more flexibility. My problem is that i cannot insert properly my div id background in the position fixed with the image.
I think it s something very simple at this stage, How would you do that?
Hope the explanation is clear
You need to do that with background-position: fixed
I've shown you in this jsfiddle: http://fiddle.jshell.net/CGJmE/7/
Good luck!
I do not understand why you put overflow: scroll on #background, it does nothing, really.
Same with the overflow:scroll on the #content. It is redundant.
In general I do not quite understand what your problem is: http://fiddle.jshell.net/CGJmE/6/
I added <div id="background"><img/></div> where you indicated.
This of course still lacks styling for the header and content. (I added background-color to .container so it doesn't look too ugly).
I assume you have that somewhere else?
If you need more help, please elaborate in more detail what your problem is.

Footer doesnt go all the way to the bottom

My footer doesnt go all the way to the bottom.
I have put my code in a js fiddle for people to have a look at:
http://jsfiddle.net/q2pd5/
My problem is better viewed on the actual page:
http://dev.madhousecreative.co.uk/
or on the full screen result of the jsfiddle its obvious also.
As It is clear to see, underneath the footer there is a white gap, and I dont know why it is appearing.
I have alot of floats in here but I have tried clearing them where necessary.
Have also tried to sticky footer as suggested in some other questions answers but that doesn't work either.
As far as I am aware it is on all browsers
Just add
overflow: hidden
to #footer in your css. This is a little trick that often gets overlooked. Basically overflow: hidden allows your div to size vertically based on it's contents.
You haven't cleared the floats of the lists in the footer. Clear it with overflow: hidden; on the footer like this:
#footer {
overflow: hidden;
}
Your footer is not being properly cleared. Try it with a clearfix like so:
#footer:before, #footer:after {
content: "";
display: table;
}
#footer:after {
clear: both;
}
#footer {
zoom:1; /* ie fix */
}
The footer has height: 200px; specified, chopping of the background image. The footer actually extends to the bottom of the window, but the last item in the list can't be seen because it is white text on white background.
In other words, setting overflow: hidden doesn't fix it alone, it just chops of the rest of the footer. Remove the height: 200px as well, and it works.

How to make dynamic content positioning?

You see tons of sites with their content very nicely centered, like dribbble.com for example. Even when the window is resized, the content stays centered and when it hits against the side of the page, stops.
I would really like to get this behavior on my website but I'm not really sure how to go about the CSS to make this happen... I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.
Can someone help me figure out how to do something like this?
The standard practice is to have a div that wraps your centered content, such as...
<div id="container">
...everything you want to center
</div>
And the in your CSS:
#container {
width: 970px;
margin: 0 auto; /*first value the margin for top and bottom, auto puts automatic margins in the left and right to center the content*/
}
I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.
It's simpler.
selector-that-matches-a-container {
width: <some length>
margin: auto;
}
Maybe with this CSS:
.content {
position:absolute;
left:100px;
right:100px;
}