Make my div go to the bottom of the page - html

I have literally tried EVERYTHING to get this to work. I've read all other stackoverflow EVERYTHING.
I'm trying to get a DIV to go all the way to the bottom of the page. As you can see in the jsfiddle (via the side borders) it does not. it seems to stop at a height of 357px which is not the full height. I then find out that my div is 100% of the body because the body is also 357px even though I also specified that it should be 100%. Nothing is working and I'm not sure why. In my previous project I never had that problem. I just specified a min-height and when I added more content pass that min-height the div accompanied it. But this time it just overflows for some reason.
html, body {background-color:#F6EBBA;height:100%;position:relative;}
#main-body{
display:block;
height:100% !important;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
bottom:0}
http://jsfiddle.net/R96Lc/
My website had much more content but I had to delete js, css which was not needed and changed the html to so that you could see what I am talking about.
Thanks in advance.

LIVE DEMO
You can declare min-height here:
html, body { background-color:#F6EBBA;
min-height:100%;
position:relative;
}

Remove the height declaration from the #main-body selector.
#main-body{
display:block;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
}
Working fiddle: http://jsfiddle.net/EfrainReyes/5tS8y/1/

If you change your height to auto or just don't define a height, it automatically contains all text that's inside the div. Here is a working version. I've also tidied up your code (just clicked the TidyUp button), so that it is readable.

I have just played with the fiddle, changing:
height:100% !important;
To
min-height:100% !important;
Seems to fix the issue
New fiddle: http://jsfiddle.net/R96Lc/2/

you are declaring
bottom 0
but the div is not absolute, you could also dont declare any kind of height.

Related

How to force the body tag to contain children

https://jsfiddle.net/17nc164k/1/
I've been searching all evening and had no luck finding what I'm after, so I've resorted to asking the community here!
I'm currently developing a Wordpress plugin that adds a fixed newsletter signup bar at the bottom of the page. As this is position:fixed it's taken out of the flow, and as such the issue is that it overlaps the bottom of the page. To fix this I've added this code which creates some space after the body tag:
body:after {
content:'';
display:block;
height:52px;
width:100%;
}
This works well, but when testing with different themes I noticed for some reason on some of them the <body> tag is collapsed, it has no height whatsoever. As a result the body:after is right at the top and not doing its job adding a space at the bottom. My thoughts are to fix this is to get the <body> tag to expand and contain it's children, that however seems easier said than done.
Nearly all the suggestions I've seen say this:
html { height:100%; }
body { height:100%; min-height:100%; }
Currently on this theme the <html> element is fine, and contains the whole page (838px height) but if I add html { height:100%; } it goes to the height of the viewport. But without adding that the body { height:100%; } code does nothing.
There are a tonne of questions out there about expanding the <body> to fit the viewport, but I've not found anything that solves this yet. Totally happy to be proven wrong as I'm sure it's addressed somewhere but after a couple of hours of head banging and no light at the end of the tunnel I've resorted to asking here.
The min-height should apply to both the body and the html:
body, html { min-height: 100% }
This way, both will take up at least the viewport height, but will expand more if the content is more than the viewport height.
Update: if the body has no height because it's contents are floated, you can set clear: both on your :after element.
Don't use the :after pseudo element. Just give the <body> tag some padding at the bottom. It will be much more cooperative and also has better browser support.
body {
padding-bottom: 52px
}
If the html element has the correct height, you could set the body element to:
body{
height:inherit;
}
This should set it to have the same height as the html.

Fixed div background

I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.

CSS content will not wrap multiple divs

OK this is fairly complicated to explain so I've put it online here:
http://jsfiddle.net/zSgPr/10/
I need the yellow container to wrap around the lower brown div and red footer div in this set-up, leaving the footer at the bottom of the page, ideally where I can then adjust it by pixel margins. I have tried multiple ways of clearing it with some luck, however I can't figure out how to get the footer to behave or the content to encapsulate properly. Could somebody suggest a means of doing it? Thanks guys.
This is what I am trying to achieve
Answer:
Was overlooking the obvious that I needed another container div. If anyone wants to see it's on-line here: http://jsfiddle.net/zSgPr/21/
Add bottom:0 to .textbox
Plcace the .textbox div outside the container which means when you are giving position:absolute the parent div should have Position:relative so add relative to main div which is .page
LIVE DEMO
SOLUTION
Change .textbox style like this mayble helpful
.textbox{
margin:0px 10px;
background-color:#262626;
width:700px;
position:relative;
z-index:40;
border:2px dashed #381e01;
float:left;
}
DEMO

CSS: How can I get rid of the default window "padding"? An element set to 100% width doesn't reach the window's borders

So I have an element that is placed directly inside body:
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
The following is the CSS used:
body{
text-align:center;
}
#header{
margin:auto;
}
So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:
| |----header----| |
^window border ^window border
I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":
$('#header').width($(window).width());
One solution seems to be to add the following CSS rules (and keep the javascript above):
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...
So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?
body has default margins on all browsers, so all you need to do is shave them off:
body {
margin: 0;
text-align: center;
}
You can then remove the negative margins from #header.
An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:
* {
margin:0;
}
This will solve the problem and will give you finer control over the margins of all elements.
Add these to the style tag in body, like the following one:
body { margin:0px; padding:0px; }
It worked for me. Good luck!!
I found this problem continued even when setting the BODY MARGIN to zero.
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
body { margin:0px; }
header { border:1px black solid; }
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.

CSS DIV not expanding when more text is added

I have a quick CSS question, i'm hoping that somebody can help me out!
I have a DIV called #ContentPanel and I want it to be able to expand so that it can cater for more text if needed. At the moment if the text is longer than 500px (as specified in the CSS) it flows out the bottom and over the content in the div below. How can I set it up to auto expand and push all divs after downwards.
If anybody has any ideas, please let me know
Here's the HTML
<div id="MainContent">
<div id="MainImage"></div>
<div id="ContentPanel">Text content goes here.</div>
</div>
...and here's the CSS
#MainContent {
position:relative;
height:500px;
width:800px;
margin:0 auto;
background-color: #000;
}
#MainImage {
position:absolute;
top:0;
left:0;
width:350px;
height:500px;
background-color:#000;
}
#ContentPanel {
position:absolute;
height:500px;
top:0;
left:350px;
width:450px;
background-color:#000;
}
Thanks in advance!
Kind regards,
Decbrad
Use min-height instead of height.
Except for IE 6: It has a bug, so that it interprets height like min-height.
As mentioned the problem is that you define a fixed height .. and so the browser adheres to it..
You need to make it more flexible by using the min-height property. However IE does not support it, but due to another bug on how it handles the height (which it expands to cater for the content if more than the defined height) it can be worked around..
A complete solution is
height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/
This, in general, is the solution to such problems.. in your case i see that you use absolute positioning.. if you really need this, and it is not just an attempt to solve your problem, then unfortunately there is no way for an element to adjust its size to cater for absolute positioned elements..
Try setting a minimum height (min-height:) as opposed to a specific, fixed height.
The property you're after is min-height, rather than height.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
This means your element will be at least that high. If the content warrants it, the height will grow past the specified value.
As a second option, you might want to try overflow: scroll; or overflow-x and overflow-y to have a scrollbar appear on the div in case the content doesn't fit.
Personal opinion: to get around IE6's issues with min-height, it's really better to use an IE6-specific conditional comment in your targeting it rather than adding hacks into your CSS.
This is if having standards-compliant CSS matters to you, although tbh that's getting more and more difficult these days thanks to wonky browser support.
<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->
you need to use min-height css attribute