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
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.
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.
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 have the following issue with css and was wondering whether there is a way to solve it by setting an absolute height value. The code I have is as follows,
<style type="text/css" media="screen">
html { height:100%; }
body { background: black; height:100%; }
#menud {
position:absolute;
padding:1em;
height:300px;
background-color:#eaeaea;
width:184px;
}
#menue {
position:absolute;
margin-top:300px;
padding:1em;
height:900px;
width:184px;
background-color:red;
}
#data {
position:absolute;
margin-top:0px;
margin-left: 184px;
width:630px;
height:600px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
#ad {
position:absolute;
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
#content {
width:1000px;
background-color:white;
height:100%;
}
#info {
margin-top:0px;
width:1000px;
}
</style>
<html>
<body>
<div id='content'>
<div id='info'>
<div id='menua'>test</div>
<div id='menub'>test</div>
<div id='data'>test</div>
<div id='ad'>test</div>
</div>
</div>
</body>
</html>
I have set the height property to 100% but this does not cover the whole background white as one would expect it to. Any help on this would be appreciated.
Thanx.
Setting the height to 100% means 100% of the current viewport height. If your page is longer than the browser viewport, the div is too short. Use auto height to let the height get calculated correctly for you.
Set the height of content back to auto (remove height: 100%):
#content {
width:1000px;
background-color:white;
}
and remove the position: absolute from your ad (or replace with position: relative), so that the ad's height is respected when calculating the parent's (#content's) height:
#ad {
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
now your content is as long as you would expect.
100% height is relative to the container. To cover the whole background, you will have to use javascript. On page load you set the height to the window height.
You can use jQuery, to do this: in that case
$("#content").css('height', $(window).height());
You might have to remove paddings and margins from the body, like body { margin: 0; padding: 0; }, for the relative-positioned container div to cover the whole height.