I am trying to use the 'position: relative;' 'position: absolute; bottom: 0;' thing to stick a div to the bottom of the page, but it keeps hanging right under the lowest visible element within the container. I tried changing 'height' and 'min-height' properties for relevant divs but never got it to work properly. it either disappears or places itself below all containers (including the footer) just sitting on plain background, or just hangs right under lowest element in the container.
here's my CSS:
#body {
padding-bottom:40px; /* Height of the footer */
padding-top: 200px;
position: relative;
}
.sink{
padding: 10px;
position: absolute;
bottom: 0;
}
.sink is the class of the div I need to stick to the bottom.
div with id body is contained within div with id container, which is contained withing html body:
body {
margin:0;
padding:0;
height:100%;
background: #7092BE;
background-image: url("bg1.png");
background-attachment: fixed;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}
#container {
min-height:100%;
position:relative;
width: 900px;
margin: 0 auto;
background: white;
padding: 0;
}
I hope I copied all the necessary info, tell me if not please.
Found the answer - I gave the div right above 'sink' (and not the one containing it) the 'position: relative;' and it worked. Thanks to everyone.
Related
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
white-space:nowrap;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
#body {
min-width:1015px;
background-color: #efeeef;
padding-bottom: 35px;
position: relative;
display: inline-block;
vertical-align: top;
}
I have css above in a page of mine. The #body is used for a div that's getting populated by partial views using ajax.
The problem is that when content in #body is overflowing to the right then body does not encapsulate the content of #body, it stays the size of the window when loaded. So when scrolling horizontally the background looks different for the body part in the region that becomes visible when scrolling.
How can i get the body to continue look the same when #body owerflows to the right?
http://jsfiddle.net/q2j4wcmo/
UPDATE:
Hashem Qolami did solve part of my problem, when zooming in on the content in #body, body still incapsulates #body and it looks as it supposed to. But in my solution when loading the page and the content in #body is overflowing body is not encapsulating the content in #body.
Any idea what could be different when running in jsfiddler where it's obviously working as supposed to?
UPDATE 2:
new example
http://jsfiddle.net/q2j4wcmo/10/
One option is changing display type of the <body> to inline-block to let it grow horizontally by its contents.
Also you could use min-width: 100%; to make sure that the <body> always fills the entire page even if its content is not that wide:
EXAMPLE HERE
html {
white-space:nowrap;
width: 100%;
}
body {
display: inline-block;
min-width: 100%;
}
Note: Since a percentage value of min-width refers to the width of the containing block, you have to specify an explicit width of <html> element as well (as I did).
This is driving me crazy! I need assistance with this CSS code, please. I have used HTML in the past but I need to use CSS for this layout and I have never used it before. My issue right now is that the top header will not align with the lower image. I can change the margin and everything moves! If I change the size of the picture, it still will not align. Also, when I resize my browser the background moves with it and I need it fixed so the "table" stays in the middle of it. Can you please help?
CSS:
html {
margin: 0;
padding: 0;
}
body {
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
font-size:12px;
color: #06185c;
background: #ffffff url(crysbg.png) no-repeat top center fixed;
margin: 0;
padding: 0;
position: absolute;
}
p {
margin: 10px;
padding: 0;
}
h1, h2, h3 {
display:none;
}
.page-wrapper {
margin: auto;
width:auto;
background:url(topbanner.png) no-repeat top center;
position:absolute;
margin-left: 318px;
margin-right: auto;
}
HTML:
<body id="crystal-self-acceptance">
<div class="page-wrapper">
Images of the issue:
http://i.imgur.com/eI8Cmns.jpg
positioning issue.
i.imgur.com/3EUEYnr.jpg
When the window is resized the center area moves away from the background. (this includes wide screens, just no screenshot of that).
Any help, please?
Edited to add jsFiddle: http://jsfiddle.net/Q3y36/8/
I have looked everywhere and I can't seem to find an answer to this - Obviously I am doing something wrong. Here is my footer css:
#footer {
position: fixed;
bottom: 0px;
left: 0px;
margin: 0px;
width: 100%;
height: 60px;
padding-top : 10px;
background-image:url(../images/bottom_bg.jpg);
background-repeat:repeat;
text-align:center;
border-top: 5px solid #000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFCC66;
}
www.bevwebdev.com/examples.php
what the heck am I doing wrong?? I've tried z-index, setting height only works for tables, position: absolute just sticks it on the middle of my shorter pages - what a headache!!!
The problem is when you scroll down, the footer covers up the bottom part of the main container. The solution is to add a bottom margin to the container div.
#container {
margin-bottom: 100px;
}
This puts 100px of blank-ness below the div so, when at the very bottom of the page, all of the text still shows.
If you always want the footer to be below everything else, you should be using position: relative
If you always want the footer to be fixed to the bottom of the browser, you should be using position: fixed
If you always want the footer a certain distance from the another element or the top of the page, you should be using position: absolute
If you want the bottom of the page to not be hidden under the footer add this CSS:
body {
padding-bottom:100px;
}
Or some number that works for you. This will push the body content up a bit so you can see it.
I usually have my structure laid out something like this:
<div id="all">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.
I have tried variations on using the css height/min-height properties:
html, body {
height:100%;
...
}
#all {
height:100%;
min-height:100%;
}
#page {
height:100%;
min-height:100%;
height:auto !important;
}
It seems like if I remove height:auto from "all" then it seems like it works UNTIL you scroll, then after the scroll the background for all dissappears
example
However if I keep the height:auto there then I get the problem of the background for page not working
example
Hopefully someone knows a fix?
Well, here's what I ended up with for the CSS:
html, body {
height:100%; /* IE6: treaded as min-height*/
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #494949;
text-align: center;
background-color: #3f91a7;
background-image: url(images/bg_body.jpg);
background-repeat: repeat-x;
background-position: center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#all {
margin: 0px;
padding: 0px;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
background-image: url(images/bg_all.png);
background-repeat: repeat-y;
background-position: center top;
overflow: hidden;
}
#page {
width: 993px;
padding: 0 0 10000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: -10000px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
}
#header, #footer {
text-align: center;
font-size: 16px;
padding: 20px;
}
#content {
padding: 25px;
}
I haven't had a chance to test it in anything other than Firefox, but, hoipefully it will give you a good start.
I would just flip the location of your div#all and div#page...
<div id="page">
<div id="all">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Although the question was posted some years ago, I ran into the same challenge and found this earlier thread today. Although I reckon there might be more fine solutions by now, I wanted to share the one I found today nevertheless.
Had the same problem, background 1 full screen, adaptive and fully below everything else and another repeating(-y) background number 2 should go on top, but not scroll out of sight because it was set to follow the height of the window which was given to the particular div which holds background 2.
Let's start with the divs I created:
<div id="full_background">
<img src="images/bkg_main.jpg" alt="" />
<div id="absolute">Contains background set to repeat-y</div>
<div id="content">Contains the content</div>
</div>
the css looks like this:
* { margin: 0px; padding: 0px; }
html { height: 100%; }
body { height: 100%; }
#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }
#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }
#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }
First off, I added a full screen & resizing background image to my site (using the div full_background and the img tag) using the following solution (very easy css solution which works like a charm in every browser and most older versions down to for example IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html > see last answer by aj_nsc
Next, using the following jQuery method - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - I created a div with id = absolute, which is given the same height as the browser window (also on resizing). I placed my repeating(-y) background number 2 in here. Set this div to position:fixed and it will stay put when the div with the content is being scrolled through.
Then below this div you put the div with your content, which freely expands downwards beyond the browser window.
Upon scrolling, the two backgrounds will keep filling the full area of the browser window (vertically as well) at all times and stay put, with the content scrolling up and down over them.
This way, upon resizing, you also make sure that both backgrounds keep filling the full background area at all times.
I tested this solution in CH, FF, IE7-9 and Safari and it worked in all of them without any problems whatsoever.
Here's what's happening: You've set html & body to have a height of 100%, but that 100% is the height of the viewport, not the document. Since #all's height is set to 100%, it is set to 100% of the parent's height, which happens to be body, which is set at 100% of the height of the viewport. Everything's inheriting the height of the viewport.
The way to fix this problem is actually the same way you would fix clearing floats that have an outer container. All you have to do is put overflow:auto; on #all. You don't even need any height declarations on any other elements, and you may be able to eliminate either the #all or the #page div.
More info here: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Have you tried:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#all {
min-height: 100%;
}
? Only for IE 6, you should set height: 100%; for #all (because it interprets that basically as min-height (as a result of a bug). As IE6 doesn't understand the min-height attribute, height effectively becomes a replacement for min-height).
If you set height: 100%; for other browsers, they will take it as 100% height of the viewport, not 100% of the page, so scrolling won't work correctly.
My comment on the downvote:
It has become clear, that my answer doesn't solve the whole problem. What we have here, seems to be quite a complex case - at least no one here seems to have found an answer yet? I've even looked into Ingo Chao's excellent (German) book, which comes to the same conclusion: Setting the parent's height won't work, and setting the child's height won't work, if the parent's height wasn't set explicitly, but rather dynamically by the size of the content.
But my answer could still help to restrict the possibilities a little bit - because setting height on #all will most likely not work on any browser except IE 6. If you disagree, please post a comment, because in that case, I'd also like to learn more about this.
This worked for me:
#page {
width: 993px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
/* height:100%; IE6: treaded as min-height*/
height: expression(document.body.offsetHeight); /* sets min-height for IE */
overflow: auto;
min-height:100%; /* real browsers */
/* height:auto !important; */
}
Forget 100% on the divs, try moving your background image to the html element and the full height border to the body.
html {
height:100%;
background-color: blue;
}
body {
margin: auto auto;
padding: 0;
color: #494949;
/*min-height: 100%; */
height:100%; /*for ie6*/
border-left:solid 2px red;
border-right:solid 2px red;
background-color:#fff;
width: 960px;
}
Have you tried this :
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
window.onload = init;
function init(){
document.getElementByID("all").style.height = getWindowHeight() + "px";
}
Or put page instead of all