I've looked at some questions posted here but everything seems overly complicated for what should be such a simple task? I just want a footer that stays fixed at the bottom of the screen no matter how long the page is vertically. Everything works, except I can't get the footer centered, it always aligns left..? Thanks! http://jsfiddle.net/n4xxj/
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
div {
width: 960px;
margin: auto;
}
#content {
background-color: beige;
border: 1px solid;
height: 1200px;
margin-top: 100px;
margin-bottom: 150px;
}
#footer {
background-color: lightgray;
border: solid 1px;
height: 100px;
position: fixed;
bottom: 0px;
}
Update your HTML to wrap in a wrapper div
<div>
<div id="content"></div>
<div id="footer"></div>
</div>
DEMO
Here you go, you will need to encapsulate the interior div's into a big #container div and add to it margin: 0 auto; to align it.
Please note for a complete fix you should also add this (it's a simple IE fix):
body { text-align: center; }
#container { text-align: left; margin: 0 auto; }
And of course the #footer will need to have width: 100%;
Also the fiddle:
http://jsfiddle.net/n4xxj/3/
Related
I want two divs that are both full height (100vh) and half width (50vw) to sit next to each other (essentially filling the whole page). However, in Chrome and Firefox the second div always drops below the first. If I decrease the height, to 50vh for example, the two divs sit side by side. Oddly enough the exact same code works in jsfiddle.net. https://jsfiddle.net/e6x2j0kr/
html, body {
background: red;
margin: 0;
padding: 0;
border: 0;
}
#container {
height: 100vh;
}
#left {
background: blue;
width: 50vw;
margin: 0;
padding: 0;
border: 0;
float: left;
height: 100vh;
}
#right {
background: yellow;
width:50vw;
margin: 0;
padding: 0;
border: 0;
float: left;
height: 100vh;
}
<div id="container">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Thank you for any help.
Using vh can be buggy fairly often, largely because scroll bars will mess it up. You may have noticed webpages where you're able to scroll sideways just a bit. About the width of one scrollbar to be exact.
In your case, I imagine what's happening is a tiny render issue, which results in a scrollbar existing, which then forces there to need to be a scrollbar permanently.
If you're willing to use other css styling, I recommend flex:
#Container {
height: 100vh;
width: 100vw;
display: flex;
}
#Container > div {
width: 50%;
}
#Child1 {
background: #E6E;
}
#Child2 {
background: #6EE;
}
<div id="Container">
<div id="Child1"></div>
<div id="Child2"></div>
</div>
The reason I recommend flex is that it will force the items to be on the same row no matter what. You may notice strange scrolling stuff. This is the vh issue again, so just using percentage might work better.
This is odd, It works in the snippet and jsFiddle, but I just chucked it into a project and opened the file in chrome and it looks as you say. I think view width might include the scrollbar in the screen size, which might make it overflow.
I set #right {float: right} and you can see it overlaps the left div. However what you can do is set the width to 50% for both of them and that works:
html, body {
background: red;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: none;
}
#container {
height: 100vh;
}
#left {
background: blue;
width: 50%;
margin: 0 !important;
padding: 0 !important;
border: 0;
float: left;
height: 100vh;
}
#right {
background: yellow;
width: 50%;
margin: 0 !important;
padding: 0 !important;
border: 0;
float: right;
height: 100vh;
}
<div id="container">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Okay so what I need to do that I can't seen to figure out is I have DIVs under a container but I want to put a completely different separate div so I can put info or whatever I need in that DIV, problem is that the DIV keeps sticking to the DIV's above it I tried Position: Absolute, Bottom: 0 - and I tried padding-top but it seems to just space the div inside the container. I knew how to do it I just cant seem to remember I also tried clear: both, but maybe I am putting it in the right place I forget. I also think maybe I should be using something different to put the 3 divs above together with something else other then float: left.. I am not too sure some help would be great! Thanks! It would help me get back on track
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index2.css">
</head>
<body>
<div id="container">
<div id="div1">THIS IS DIV 1</div>
<div id="div2">THIS IS DIV 2</div>
<div id="div3">THIS IS DIV 3</div>
</div>
<div id="footer">I want this div to be separated from t
the other ones above. Not only a space between them
but also to be completly seperate from the others not
with spacing.
</div>
</div>
</body>
</html>
CSS:
#container {
margin-left: auto;
margin-right: auto;
width: 500px;
height: 300px;
border: 1px solid black;
}
#div1 {
float: left;
width: 33.3%;
height: 200px;
}
#div2 {
float: left;
width: 33.3%;
height: 200px;
}
#div3 {
float: left;
width: 33.3%;
height: 200px;
}
#footer {
width: 500px;
height: 300px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
#foot1 {
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
Just add margin-top to your footer div:
margin-top: 20px;
Check out this demo
I have a div that I'm trying to position by percent in order for it to stay in place (it kind of floats around not centered on an empty part of the page), while still making it accessible and look good across different screen sizes and not really off to one side.
The problem is that, while I can use left: x% to adjust it accordingly, trying to use top does not do anything unless I'm specifying pixels, not percent. If I try to alter bottom in any way, it latches the div I'm trying to position to up near my header, and altering bottom with px makes it go up the screen from the header area.
Absolutely positioning the content_wrapper actually makes the top attribute work just fine, but it pushes a bunch of space below my footer and adds a scrollbar, pretty much ruining the design beyond the footer.
Here's the HTML:
<body>
<div id="container">
<div id="content_wrapper">
<div id="header">
</div>
<div id="content">
<div class="marquee">
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
</div>
</div>
</body>
And here is the CSS:
html, body {
height: 100%;
}
#content {
height: 100%;
position: relative;
width: 100%;
float: left;
}
body {
margin: 0;
padding: 0;
color: #FFF;
/* background: image.jpg; */
background-size: cover;
}
.marquee {
position: absolute;
height: auto;
padding: 10px 5px;
background-color: #F8F8F8;
width: 30em;
left: 15%;
}
#footer_wrapper {
width: 100%;
height: 43px;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -43px 0px;
}
#content_wrapper {
width: 100%;
margin: 0px 0px -41px 0px;
padding-top: 40px;
height: 100%;
}
#footer {
position: relative;
z-index: 10;
height: 4em;
margin-top: -4.07em;
background-color: #FFF;
clear: both;
background-color: #2A64A7;
border-top: 2px solid #F8F8F8;
}
(There is a float or two in there, like in #content, not necessary to the layout, but which are attempts to fix the issue.)
Any help in this matter would be hugely appreciated. Sorry about all the code, but I feel like the footer bits are necessary simply because of the aforementioned issue with scrolling.
Take out the
height: auto !important;
in #container.
That lets you use % for top or bottom.
This is difficult for me to ask.
In short: my div overlaps (gets outside the table). I want the table to be sized according to the div.
When I'm trying to add a footer, the content overlaps it. Here is the code:
Here is the page: page
the .middle css class sets the height of the center content to 25px The footer is therefore positioned related to the menu table content on the left.
If you remove the 25px from the css class the div should work as you expect
Ok I will suggest you rewrite your site because it's total mess, use my template for starters:
<div class="wrap">
<div class="header"></div>
<div class="body">
<div class="left-side"></div>
<div class="center"></div>
<div class="right-side"></div>
</div>
<div class="footer"></div>
</div>
And css:
.wrap{
width: 400px;
height: 500px;
margin: 0 auto;
}
.header{
width: 100%;
height: 50px;
background-color: #dddddd;
}
.body{
width: 100%;
height: 350px;
}
.left-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.center{
position: relative;
float: left;
width: 60%;
height: 100%;
background-color: #cccccc;
}
.right-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.footer{
width: 100%;
height: 100px;
background-color: #dddddd;
}
Here is live example in jsFiddle
well, #Arturas.. I kinda agree with #skmasq for your website. I think it'll be better if you're not using table for the layout. but, if still want to use your current website source code, try to delete the .middle's height property. because you set it fixed 25px, but the content is overload, that's why it's overlapping.
Not sure how to title the question. I have an html structure like this:
<div id="nav"></div>
<div id="wrapper">
<div id="content">
</div>
</div>
With some css like this:
#nav {
width: 200px;
height: 50px;
margin: 0 0 0 -100px;
position: fixed;
left: 50%;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
The wrapper is wider than the content, and the content is centered in the wrapper. My problem is keeping the nav div, which is fixed to the top of the page, centered/aligned with the content div when the window is smaller than the wrapper div. Issues arise when you scroll left and right, the fixed div stays centered in the window and the content div scrolls left and right. I'm trying to accomplish this without javascript.
Here's a jsfiddle of what I'm running into, resize the results window to see how the nav div won't stay centered/aligned with the content div when the window is smaller than the wrapper div.
http://jsfiddle.net/p2Mzx/1/
Thanks in advance!
The easiest solution would be to put #nav in your #wrapper and give it a horizontal margin of 25px:
html:
<div id="wrapper">
<div id="nav"></div>
<div id="content">
</div>
</div>
css:
#nav {
width: 200px;
height: 50px;
margin: 0 25px;
position: fixed;
top: 0;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Also see the fiddle.
It would be more appropriate to put the nav inside the wrapper, just above the content.
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
</div>
The CSS of the nav can have left and right margins of 25px. Also absolute positioning and the width is not needed.
#nav {
height: 50px;
margin: 0px 25px 0px 25px;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Please see this fiddle: http://jsfiddle.net/p2Mzx/20/
You can fixed the nav and content to give padding-top.
Consider this link jsfiddle
I think you can add margin: 0 auto for nav too.
Then nav will be positoned to parent element just like wrapper,centered.
but removed fixed form nav. position:fixed makes it positioned to the browser window and out of narmal flow. Is that you want?