Suppose I have a document like
<style type="text/css">
div {
border:1px solid;
padding:15px;
}
#i_am_relatively_positioned{
background-color:#fcc;
margin:50px;
padding:50px;
position:relative;
}
#inner {
background-color:#cfc;
}
#i_want_to_be_absolute_to_body{
background-color:#ccf;
left:0;
position:absolute;
top:0;
}
</style>
<body>
<div id="i_am_relatively_positioned">
<div id="inner">inner</div>
<div id="i_want_to_be_absolute_to_body">absolute to body</div>
</div>
</body>
Is there a way to make #i_want_to_be_absolute_to_body positioned absolute with respect to the body element, rather than its immediate relative container?
I know I can just use some negative top and left but that seems kludgey - is this my only option?
You can use a bit of javascript to do this (I'm assuming you can't change the markup?).
document.body.appendChild(document.getElementById('i_want_to_be_absolute_to_body'));
Is it important, that the Element "i_want_to_be_absolute_to_body" is in the Container "i_am_relatively_positioned"?
If not then this solution:
<div id="i_am_relatively_positioned">
<div id="inner">inner</div>
</div>
<div id="i_want_to_be_absolute_to_body">absolute to body</div>
Related
This is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
I have a center aligned with 1060px width. Within this, I have two more divs as and with different background color/images and width of 260px and 800px respectively.
Now I need to make the height of the two child divs same, irrespective of the content inside them. If “child1” has huge content and we need to scroll down the browser to see it and “child2” has less content, then also “child2” should have the height extended to match with the “child1”. On the other hand if both “child1” and “child2” has less content and does not produce browser scroll, then both of the should occupy the height of the browser window. The code snippet is given below.
<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
.parent { clear:both; margin:auto; width:1060px; }
.child1 { background-color:#999999; float:left; width:260px; }
.child2 { background-color:#99CC00; float:left; width:800px; }
.child1a, child2a { float:left; width:100%; }
.child2a { border-bottom:1px solid #000000; height:500px; }
</style>
</head>
<body>
<div class="parent">
<div class="child1">
<div class="child1a">1</div>
<div class="child1a">2</div>
<div class="child1a">3</div>
</div>
<div class="child2">
<div class="child2a">1</div>
<div class="child2a">2</div>
<div class="child2a">3</div>
</div>
</div>
</body>
</html>
Is it possible to solve it using only CSS, or need to use JavaScript?
You can do using 'display:table-cell' .
http://jsfiddle.net/sWHKs/
I have two child divs in a parent div. first child div A has an absolute height and second div B should take the rest of the height available. How to do this? Basically for div, I want height like (100% - 37px)
<style>
#C{
height:100%;
width:500px;
}
#A{
height:37px;
width:100%;
}
#B{
height: ????;
width:100%
}
</style>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
#alter, for rest on the height you need to give padding to the div B according to the height of div A
#B{
padding-top:37px;
}
for example
I think the best way to achieve that is to give the parent div a min-height and then give div B a min-height of (min-height - 37)px. See code below
#C{min-height:600px; width:500px;}
#A{height:37px; width:100%;}
#B{min-height:563px; width:100%}
Sample Code:
<html>
<head>
<style type="text/css">
#C{min-height:600px; width:500px; background-color:yellow;}
#A{height:37px; width:100%; background-color:blue;}
#B{min-height:563px; width:100%; background-color:black;}
</style>
</head>
<body>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
</body>
</html>
I have added color to the divs just to differentiate them
<head>
<style type = "text/css">
body{
text-align:center;
}
#container{
position:relative;
width:600px;
height:auto;
border:1px solid #ccbbaa;
}
#box{
position:absolute;
width:300px;
left:2px;
border:1px solid #ccbbaa;
}
</style>
</head>
<div id = "container">
<div id = "box">
<p>
message .....
</p>
<p>
message .....
</p>
</div>
</div>
The question is how to make the height of container and box consistent using not fixed height.
thanks.
Could you use javascript? Here is my way by using jQuery:
$("#box").resize(function() {
$("#container").width($(this).width()).height($(this).height());
});
You have to make the child box div, relatively positioned. Absolutely positioned box will not make the container auto extend height.
I have div with position absolute and I want to put another div under.
The two divs have diffrent widths.
The div above is with position absolute and is centered. The div that should be at the bottom has 100% width.
How to make that?
Thanks!
make one div that contains both
use float:right
example:
div#p8015buttons {
position:absolute;
bottom:0.5em;
right:0.5em;
width:90px;
}
div.p8015 {
float:right;
margin:1px;
}
Wrap both DIVs in a third one and position that one absolute instead of the original one.
Not tested, but this should do it.
HTML:
<div class="wrapper">
<div class="one">
Content
</div>
<div class="two">
More content
</div>
</div>
And the CSS:
.wrapper
{
position:absolute;
width: 500px;
height: 400px;/*whatever you want*/
}
.one,
.two
{
position:relative; /*or static*/
}
Hope it helps :)
Tested
HTML MARKUP
<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>
CSS
.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}
Try this one, you can then move style to your css
<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>