I am using this CSS:
html{
height:100%;
}
#Nav{
position:fixed;
top:0;
}
#Heading{
position:absolute;
top:0;
}
The problem is that when using the DIV #Heading in the HTML file, it will cause a scrollbar.
So is it impossible to use two DIVs with "fixed" positioning and top 0?
When I remove the second div (position:absolute) the scrollbar disappears.
Could you tell me how to code the CSS correctly?
Thanks a lot!
I've found hear a solution:
Make body have 100% of the browser height
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
The next problem is that I want to add a DIV with position: absolute to the bottom of the site, but this DIV is hanging in the middle of the page.
Related
I have structure where in the text needs to flow within the div box in the body. but seems like i cant get it to work. Maybe i am doing something wrong with the position: tag?
Here is the fiddle: http://jsfiddle.net/Tf5Z8/
and this is what i was hoping to accomplish: http://oi58.tinypic.com/332njm9.jpg so that as text keeps getting added (less or more), it keeps the bottom intact and resizes the div accordingly. Right now i have the #bodyContainer set to height:300px;
#bodyContainer { width:1024px; height:300px; margin:auto; background-color:#f4f3e7; padding-top:20px; }
but i don't want to do this since there would be many pages with different text amount.
Thanks a million, Cheers.
Change the #bodyContainer height to auto. Like this: JSFiddle
All you have to do is add min-height. So replace height property with min-height. And you are done.
If you don't have any problems using absolute position try this method. Add relative position to #bodyContainer and absolute position to #sidebarLeft, then float:right sidebarRight. Check this fiddle
CSS changes
#bodyContainer {
width:1024px;
min-height:100px;
margin:auto;
background-color:#f4f3e7;
padding-top:20px;
position:relative;
overflow:hidden;
}
#sidebarLeft {
height:100%;
width:360px;
background-color:#FFF;
margin-left:30px;
margin-bottom:20px;
position:absolute;
top:20px;
left:0
}
#sidebarRight {
height:100%;
width:634px;
float:right;
}
I have left div fixed, and right div scrollable. I have applied height:100% on the right div,but it doesn't work, i made background of the div yellow,and when i scroll it disappears, like it doesn't extend like it should.
Here is my code:
#levi{
width:25%;
height:100%;
background-color:#f98765;
position:fixed;
left:0;
float:left;
}
#desni{
background-color:yellow;
left:25%;
height:100%;
position:absolute;
left:value;
float:left;
}
One method is to set the background color of your right column on the <body> tag. That way, the background color will appear to always cover then entire height of the scroll area.
This is commonly known as "faux columns".
body {
background-color:yellow;
margin:0;
}
#levi {
width:25%;
height:100%;
background-color:#f98765;
position:fixed;
}
#desni {
position:absolute;
left:25%;
}
Working Example (jsFiddle)
Updated Working Example (with OPs posted HTML structure)
I have been at this for a while and I am wondering how to make a side menu stay in the same place, but stay floating on the right side. When ever I use the fixed element it all ways pulls my sidebar from right to left.
Thanks.
Set sidebar position to fixed. Set the height and width you wish and the set the right css property to 0. That should work
Make sure to Specify position like top and left like:
div#myDIV
{
position:fixed;
width:100px;
height:100px;
left:10px;
top:100px;
}
See this example: http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed
try right:0
.cont
{
position:fixed;
width:200px;
height:200px;
right:0px;
top:100px;
background:#999;
}
http://jsfiddle.net/6L6wj/
I would also consider to use the z-index property:
#yourdiv {
position:fixed;
width:200px;
height:200px;
right:10px;
top:10px;
z-index: 10;
}
Remember to set the other contaner to
#maincontainer {
position:relative;
z-index: 1;
}
jsfiddle
How to make 2nd div streatch to all its vertical place. It has to 'take care' of bottom margin of div above him and bottom margin of all the page. How to make it fill all that place? There will be normal content inside it, I will make page that will be scrolling horizontally and I need it to fit in various user Y resolutions. Bottom margin will be constant. I would really like to avoid js in that.
http://jsfiddle.net/Jf5J8/2/
#rest {
background-color:blue;
height:100%;
position:relative;
top:0;left:0;
bottom:0;right:0;
}
html, body {
height:100%;
}
Your code
#rest {
background-color:blue;
height:100%;
position:relative;
top:0;
left:0;
bottom:0;
right:0;
height:auto;
}
contains two time height. Remove height:auto; in the end
I have a page news.html which is php included in my index.html - inside a #content div.
news.html has another div, which floats on the right and has a vertical line jpg to separate it from the main content, adds and stuff like that will be placed there.
Problem is I can't get it to 100% height(although it works for the line jpg) and I think the reason is some css issue. I also cannot place it below the footer for some reason, so that the 100% height line does not override it.
I use a main.css file for every page.
If I use position:fixed for the #poll div height 100% works, but then when zooming in/out of the browser my div moves which is not what I want. I know there is a min-width property but didn't seem to work for me.
Here is my code:
index.html:
//Content div is placed inside a #main table//
<div id="content"><?php include "news.html"?></div>
main.css:
html, body{
height:100%;
}
#main{
width:1010px;
height:100%;
z-index:2;
}
#content{
margin-top: 303px;
height:100%;
z-index:1;
}
#footer{
z-index:2;
}
#poll{
height:100%
background-color:rgba(255,0,0,0.6);
float:right;
z-index:1;
}
news.html
<div id="poll"><div style="background-image:url(images/vertical.jpg); width:5px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0; z-index:0;"></div>
<div>POLL CONTENT HERE</div>
</div>
If you use z-index then give to at least one position relative or absolute
Then it will work, like this:
{
z-index:2;
position:relative;
}
How to work Z-index Link here
z-index only works if you specify the position attribute for the element. So for each element for which you have given a z-index you need to specify the position to be either
position: relative;
or
position: absolute;