http://jsfiddle.net/L9tqk/2/
i cant place my footer in correct place
<div id="logo"></div>
<div id="content">
<div id="trans">
<div id="data">
<div id="left"> </div>
<div id="right"> </div>
</div>
</div>
<div id="footer"></div>
#footer {
position:relative;
width:100%;
clear:both;
}
when give
bottom:0;
to #footer normal window it placed correctly, but when window size is changed, the footer position is not correct.
remove position:absolute; from #content #trans and set float to it:
DEMO
#content #trans {
background: rgba(0,0,0,0.3);
width:100%;
height:auto;
float:left;
border-radius:5px;
color:Red;
}
Give fixed position to footer.
#footer{
position:fixed;
}
Demo here.
OR:
Give hidden overflow to #content #trans.
Write:
#content #trans{
overflow:hidden;
}
DEMO here.
#content #trans {
background: rgba(0,0,0,0.3);
width:100%;
height:auto;
float:left;
top:0px;
left:0px;
z-index:-1;
border-radius:5px;
color:Red;
}
OR
#footer {
position:fixed;
bottom:0;
width:100%;
clear:both;
}
Final correct answer : http://jsfiddle.net/L9tqk/11/
change `position: absolute;` to `position: relative;` and
overflow: hidden; add in your `#content #trans`
try this
#footer {
position:absolute;
width:100%;
clear:both;
bottom:0;
}
Change this Css position to relative and it works
#content #trans {
background: rgba(0,0,0,0.3);
width:100%;
height:auto;
position:relative;
top:0px;
left:0px;
z-index:-1;
border-radius:5px;
color:Red;
}
The updated fiddle
http://jsfiddle.net/L9tqk/9/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This works for almost all web browsers. It remains fixed and all other contents will be behind it.
Related
Please take a look at this fiddle https://jsfiddle.net/t2w4yd8j/1/
I have a couple of questions about this:
1) There seems to be a padding between the .top div(red) and the browser if I use the relative position. However if I change the position of .top div(red) to absolute the padding goes off. Why is that?
2) The .next div(pink) should stack after the .main div(grey). But the main div seems to be taking a bit more extra space even though the height is set to auto and there is no children in the extra space. Why is that?
Thanks
CSS
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
position:relative;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position:relative;
top:-25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
width:200px;
height:50px;
display: inline-block;
background-color:#0F0;
}
.bottom{
position:relative;
top:-50px;
left:0px;
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
HTML
<div class="main">
<div class="top"></div>
<div class="middle">
<div class="midfill"></div>
</div>
<div class="bottom"></div>
</div>
<div class="next"></div>
1) By placing it relative, it relates to it's parent, the body tag. Remove the padding and margin from the body and HTML tag, and it fits. When you place the div absolute, it's taking out of the document flow, making it relate to the viewport. That explains the difference.
html, body { margin: 0; padding: 0; }
2) you position the div's relative, and then move them around. But the place stays reserved in the parent div. I moved the divs a bit around.
html, body {
margin: 0;
padding: 0;
}
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position: absolute;
margin-top: -25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
display: inline-block;
width:200px;
height:50px;
background-color:#0F0;
}
.bottom{
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
Updated Fiddle
Solution for your both problem is following. By Default it takes extra margin by removing it from body solved your issue:
body{
padding:0;
margin:0;
}
Check Fiddle Here.
How would i fix this logo to allways be in the center top of the page and doesn't move as browser changes size, so when the browser changes size the logo stays in its old position and will not recenter its self.
Here is my current CSS
CSS
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
Thankyou for your help
CSS
body
{
height: 1000px;
}
#logo {
position:absolute;
background-image:url('http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1');
background-size:150px;
width:150px;
height:150px;
position: fixed;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
HTML
<div id="logo">
</div>
Fiddle
Remove your margin, left and right properties and add this one:
margin-left:100px;
This way, your image will always be 100px to the right.
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
z-index:1;
top:0px;
margin-left:100px;
}
This nested div renders differently in FireFox and Chrome. Chrome, with the result I am looking for.
A div that can grow with content, inside of another div that has a padding of 20px.
The effect should look like it has a 20px bar above and below the nested div like this (in Chrome).
http://jsfiddle.net/SEOplay/58xRJ/2/embedded/result/
The code I'm using:
HTML
<section>
<div class="dualContainer">
<div class="dualBgBlock"></div>
<div class="dualMiddle">
<div class="dualContent"></div>
</div>
</div>
</section>
CSS
div.dualContainer {
margin-top:50px;
margin-bottom:20px;
position:relative;
z-index:0;
width:100%;
}
div.dualBgBlock {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
background-color:#ccc;
width:60%;
height:100%;
padding:20px;
}
div.dualMiddle {
width:80%;
margin:0 auto;
}
div.dualContent {
background-color:#333;
overflow:hidden;
position:relative;
height:200px;
}
Link to the fiddle:
http://jsfiddle.net/SEOplay/58xRJ/2/
So how can I get FireFox to render my code the way Chrome does?
Padding is in the wrong place. Move it from .dualBgBlock {} to .dualContainer {}
Fiddle Example
CSS:
div.dualContainer {
padding:20px;
}
div.dualBgBlock {
// No padding here
}
move your padding to div.dualMiddle, see demo here
div.dualBgBlock {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
background-color:#ccc;
width:60%;
height:100%;
padding:20px; //remove this line
}
div.dualMiddle {
width:80%;
margin:0 auto;
padding:20px; //add this line
}
I have a DIV that contains several other divs. I need divs to be able to peek out of the parent vertically, but not horizontally.
I thought using overflow-x and overflow-y would solve this little problem, but I can only get either x and y to show, or get them both to hide.
My CSS and HTML:
.game {
position:absolute;
width:400px; height:300px;
top:100px; left:100px;
background-color:#cccccc;
overflow-x:hidden;
overflow-y:visible;
}
.block1 {
position:absolute;
width:100px; height:100px;
top:-50px; left:150px;
background-color:#ffcccc;
}
.block2 {
position:absolute;
width:100px; height:100px;
top:150px; left:-50px;
background-color:#ccffcc;
}
<div class="game">
<div class="block1"></div>
<div class="block2"></div>
</div>
See this JSFiddle: both child divs are cut off, even though overflow-y is set to visible.
Structural Change Needed
This gets what you want if it works otherwise (I don't know if the html/css changes affect other aspects of your game). It solves it by layering the "game" so that its vertical direction fills the entire screen, and then your "window" (grey area) is set by a child div. This allows the overflow: hidden horizontally, but not have it vertically.
See fiddle.
HTML
<div class="game">
<div>
<div class="block1"></div>
<div class="block2"></div>
</div>
</div>
CSS
html, body { height: 100%; margin: 0;}
.game {
position:absolute;
width:400px;
height:100%;
top: 0;
left:100px;
overflow:hidden;
}
.game > div {
position: absolute;
top: 100px;
height: 300px;
width: 100%;
background-color:#cccccc;
}
.block1 {
position:absolute;
width:100px; height:100px;
top:-50px; left:150px;
background-color:#ffcccc;
}
.block2 {
position:absolute;
width:100px; height:100px;
top:150px; left:-50px;
background-color:#ccffcc;
}
try Changing your game class to
.game {
width:400px; height:300px;
top:100px; left:100px;
background-color:#cccccc;
overflow-x:hidden;
overflow-y:auto;
}
Thanks,
Dhiraj
I am trying to keep #chat-inner div in the middle of the #chat-main div, well I can do that by using percentage values but my problem is that there should be 2px gap (with respect to both width and height) which a percentage value cant provide. For clear understanding please see the comment in CSS code.
JSbin
HTML
<div id="chat-outline">
<div id="chat-main">
<div id="chat-inner">
</div>
</div>
</div>
CSS
#chat-outline
{background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
}
#chat-inner
{
width:95%;
height:97%;
/*How can I give pixels here? I need 2px value*/
margin:2.5% 2.5% 2.5% 2.5%;
/*margin:2px;*/
background-color:cornflowerblue;
}
Try something like this (demo):
#chat-outline
{ background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
position:relative;
}
#chat-inner
{
top:2px;
bottom:2px;
right:2px;
left:2px;
background-color:cornflowerblue;
position:absolute;
}
you can achieve your desired results through padding also :-
#chat-outline
{background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
padding:2px;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#chat-inner
{
width:100%;
height:100%;
background-color:cornflowerblue;
}
DEMO