There is a content class, in which there 2 have class classes in it, One is left float and other is right float as you seen in image.
I want a footer at the end or bottom of my page, i.e after the 2 classes div ends.
CSS:
.footer
{
background-color:black;
width:100%;
height:25px;
margin-right:auto;
margin-left:auto;
color:white;
bottom:0px;
position:absolute;
}
But is it not working. If you see the image,it is not at the bottom... even though bottom:0px? Is there any problem?
Add this before footer div
<div style="clear:both;"></div>
and remove position: absolute from footer css
Related
i have parent div with 2 child divs inside. Both child div contain text, only 1 bigger than other. now consider responsive web design. I want 2nd child div at the bottom of parent div... i need to ensure both child div float left so that they can behave properly in responsive web
<div class="TitleHeader_Bar_L2">
<div class="WebPage_Title_L2">
<h4>Avaliable FeeZones</h4>
</div>
<div class="Title_Message_L2">
Select FeeZones to Add in Given Scheme
</div>
CSS
.TitleHeader_Bar_L2{
overflow:auto;
width:100%;
background-color:red;
}
.WebPage_Title_L2{
float:left;
color:#F8F8FF;
font-size:1.7em;
padding:.5%;
margin-left:.7%;
}
.Title_Message_L2{
float:left;
color:#F8F8FF;
font-size:1em;
font-style:italic;
margin-left:.7%;
}
You can try this:
Fiddle Here
.TitleHeader_Bar_L2{
overflow:auto;
width:100%;
background-color:red;
position:relative;
}
.WebPage_Title_L2{
float:left;
color:#F8F8FF;
font-size:1.7em;
padding:.5%;
margin-left:.7%;
}
.Title_Message_L2{
color:#F8F8FF;
font-size:1em;
font-style:italic;
position:absolute;
bottom:0
}
Good Luck...:)
so here's my problem. I have two divs, and i want to be able to see both of them when i scroll down the page. Both divs are in the same parent container. If i give the parent a position:fixed, the the bottom div get's cut off, because you have to scroll to see it's full height. So i tried this. I gave position:fixed to the top div, and position relative to the bottom one. The fixed one now scrools but the relative doesn't "follow it" or stay beneath it.
Any ideas?
If I understand you correctly, the answer is to position both divs absolutely within the fixed parent.
JSFiddle DEMO
HTML
<div class="parent">
<div class="topDiv"></div>
<div class="bottomDiv"></div>
</div
CSS
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: fixed;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
top:130px;
left:0
}
I have this side menu that I wanted to be fixed so it will follow the user when the user scrolls. I'm planning to put jumping targets inside it because the contents are very long.
The problem is, I made it fixed and then when I scroll it down, it went pass the footer. I used
top:0;
and it doesn't went up the footer, but it went up the header. What would be the solution?
This is my html.
<div class="myheader">
</div>
<div class="content">
<div class="left_side">
</div>
<div class="right_side">
</div>
<div class="footer">
</div>
This is my css:
.myheader{
float:left;
width:100%;
height:190px;
background: #fff url(img/blackorchid.png) repeat scroll 0 0;
}
.content{
float:left;
background: #fff url(img/linen.png) repeat scroll 0 0;
height:auto;
margin-left:120px;
width:1100px;
}
.left_side{
width:800px;
float:left;
}
.right_side{
width:300px;
height:500px;
background-color:yellow;
float:right;
position:fixed;
top:0;
}
There are contents inside the left_side. That's where the texts are. The division that I want to be fixed is <div class="right_side">.
Not sure I am fully following, but if you want it to be fixed to the foot of the page, then why not set bottom to 0. See here: jsdfiddle. I also set the right to 0 to make it fix to the right of the page.
.right_side{
width:300px;
height:500px;
background-color:yellow;
position:fixed;
bottom:0;
right:0;
}
I added the fill div just to make sure that the page scrolled.
If you want some space from the bottom, then just specify a margin. See this updated fiddle: jsfiddle
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;
I'm trying to create in HTML5 a view made of div's that displays in the center of the page while the background is grayed out. Something like the Silverlight child window. I am having a horrible time trying to get this to work.
You can easily do it with some basic css like so. This is just the css part not javascript to animate it or toggle. But it should be enough to get you started.
CSS
.div {
position:absolute;
top:300px;
width:300px;
height:260px;
left:50%;
z-index:1000;
margin-left: -150px; /* negative half the width of the div */
}
.background {
background:#000;
opacity:0.5;
position:fixed:
width:100%;
height:100%;
z-index:999;
}
HTML
<div class="div">
My Content
</div>
<div class="background "></div>
this is to make the page centered with 900px width, you add this to your div element:
width:900px;margin-right:auto;margin-left:auto;
for the background, you need to add the following style to you body element
color:gray;padding:0px;margin:0px;
you have to include a width in order to center an element. margin-right:auto; margin-left:auto; will not work if you did not include a width!