I want to know how to position multiple div's on each other, without position absolute in HTML.
I tried with position: absolute but due to this, I have to specify container div height explicitly, which I don't want to do.
How do you want to place them exactly ?
If they are div, they should be on top of each other with position: static by defaults. If you don't want to use position: absolute, you could use negative margins. This is not a recommended solution, but the hack definitely works.
.d1 {
background-color: red;
height: 200px;
width: 150px;
}
.d2 {
background-color: blue;
height: 150px;
width: 100px;
margin-top: -100px;
}
<div class="d1"></div>
<div class="d2"></div>
Note that you can use % margins if needed but the % margin properties will always be a percentage of the parent block WIDTH. So be careful with that.
NB : Tanks to #Oriol for correcting mistakes I made. I edited my answer thanks to his advice.
Not sure what you're trying to achieve but I can imagine only one scenario, where something like that would be usefull. Namely switching between several divs. If that's the case use display:none on all but the current div.
In anyway child div is by default "overlapping" with parent div, so I assume what you mean is that you want siblings to be "on each other"... however that sounds.
The only way to do this is (except for negative margin hacks) absolute and relative positioning.
Here's how:
#foo{
background-color:red;
height: 50px;
width: 50px;
position: relative;
}
#bar{
background-color:blue;
height: 50px;
width: 50px;
position: absolute;
}
#foobar{
background-color: green;
height: 50px;
width: 50px;
position: absolute;
}
#raboof{
background-color: yellow;
height: 50px;
width: 50px;
}
<div id="foo">
<div id="bar"></div>
<div id="foobar"></div>
<div id="raboof"></div>
</div>
Jsfiddle: https://jsfiddle.net/t81hvsa1/
Keep in mind that: 1. You may but don't need to make last child absolutely positioned. 2. The last absolutely positioned child will always be on top.
Edit: I've just noticed, this question's discussion has all the answers you could possibly want; more elaborate and better formatted at that.
Related
I want to have a nested div appear over its parent, while the parent has overflow-y: scroll
<div id="parent"><div id="child"></div></div>
And the css:
#parent {
position: absolute;
width: 150px;
height: 150px;
background-color: green;
overflow-y: scroll;
}
#child {
position: absolute;
width: 100px;
height: 100px;
top: 70px;
background-color: red;
z-index: 2; (????)
}
Want I would like to get is the red div to actually appear over and outside the green one without activation the overflow property.
But it's just rendered over its parent, which then proceeds to overflow with the scrollbar. So it is over the parent, which it naturally is, but not outside it and I sadly can't just ditch the overflow-property. I just want to ignore it for that one element and pretty much change it to overflow: visible.
Child cant exit parent's DIV. You need to use position:absolute, or even two different parent divs.
See here: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
And here's a css trick solutions: https://css-tricks.com/almanac/properties/z/z-index/
Good luck, next time just post the code in jsFiddle.
I know this title is probably about the most common on SO, but I seem to have a very specific problem that I can't find documented.
I have a div that I want to be exactly square, so I followed the CSS advice in this answer. I also want a child div to fill this space, so I've followed all the standard guidelines of having a clear:both div in a wrapper, etc, but my child div is still not filling its parent. The problem is the height: 0 of the parent div - is there a solution to this but still maintaining the exact square (preferably pure CSS, I'm aware there are JS solutions). Example of this is at this fiddle.
You can give the inner box an absolute position and set it to conform to the edges of the containing box:
.box div {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
background-color: rgba(0,0,0,0.1);
}
jsfiddle
Not sure if it's any better to what you proposed, maybe if you wanted content in the box?
If you're not too worried about support then using vh, vw, or vmin would be a good alternative. Since height would actually be set you could easily set the child element to fill the parent.
CSS:
.parent {
width: 50vmin;
height: 50vmin;
background-color: blue;
margin: 0 auto;
}
.child {
width: 100%;
height: 100%;
background-color: red;
}
HTML:
<div class='parent'>
<div class='child'></div>
</div>
Here's an example. I like vmax, but it's not as well supported as vmin, vh, and vw.
This padding trick for responsive boxes work with absolute positioning.
css-padding-trick-responsive-intrinsic-ratios
So use absolute positioning for inner div.
.box {
...
position: relative;
}
.box div {
...
position: absolute;
left: 0;
top: 0;
}
Adding padding-bottom: 100% to the child div does fill the space and seems to be a fix; the updated jsfiddle reflects this
I have a div with another div inside. The second div have width,height and background-color: green. This one has absolute position and so its container isn't shown.
<div id="root">
<div id="r1">
<div id="r2">
</div>
</div>
Mas
</div>
CSS file
#root{
width:300px;
background-color: red;
}
#r1{
position: relative;
width: 100px;
background: yellow;
}
#r2{
position: absolute;
display: inline-block;
width: 50px;
height: 50px;
left: 0;
background-color: green;
}
http://jsfiddle.net/sev2E/1/
I want to know if it's possible that its container is shown and wrap the div with absolute position.
I want to see something like this but without using relative position and without adding height to its container.
http://jsfiddle.net/sev2E/2/
Thanks!
add some height to your r1 css
#r1{
position: relative;
width: 100px;
background: yellow;
height:60px;
or adding a padding-bottom:"height of your div" which is same
#r1{
position: relative;
width: 100px;
background: yellow;
padding-bottom:55px
}
The short answer is no.
Once you absolutely position an element, it is taken out of the document flow and it will no longer be factored into computing the height or width of its containing block.
The text formatting model used by the Android API (written in Java) is different from that implemented by modern browsers that are CSS compliant.
To get similar visual effects between a CSS based web page and an Android interface layout, you need to code each implementation according to the rules and constraints of each language being used.
The answer by Pumpkinpro is essentially the way to get the "wrap_content" effect in CSS.
I am trying to design a website, where I want a div of 100% height inside a element and then some other div inside it, formatted in a specified manner.
the code I am trying is this
css
#main1{
margin: 0 auto;
width:300px;
background: red;
position:absolute;
}
#content1{
top:0;
width: 300px;
height: 250px;
background: gray;
}
#content2{
width: 300px;
height: 250px;
background: yellow;
}
#content3{
width: 300px;
height: 250px;
background: brown;
}
#bottom{
width: 300px;
height: 75px;
position:absolute;
bottom:0;
background: blue;
}
and I have designed it like this
<td width="300" valign="top" style="position:relative; height:100%">
<div id="main1">
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
</div>
</td>
I want the div with id content1 at extreme top and with id bottom at extreme bottom inside td, so that if the height of the element varies it automatically get aligned at top and at bottom with margins in between the inner divs, also I want this to be all browsers compatible.
I tried and it worked in IE.
I have tried so many codes but couldn't get the solution
You can see in this link at right side that where and what I am trying to make
http://www.spoiledagent.com/about_hanu.html
Thanks
First, I'd ask that you display the whole of the HTML markup for the body structure. A small snippet doesn't give an accurate picture of the entire structure that could be affecting your undesired result.
Second, I'd recommend you don't use tables for site layout. It's bad practice for a variety of reasons. Here's a Q/A with supporting arguments.
Third, you have to remember that every element that you make has a parent, right up until the <html> tag. So, let's say I wanted the main container of my site to have 100% height to the window.
Let's say this is the only other element besides <html> or `'.
<div id="container">
<h1>Why you no touch the bottom?</h1>
</div>
with this CSS:
#container {
background: #ccc;
height: 100%;
}
http://jsfiddle.net/BvNY4/
In this fiddle, we can see it doesn't to to 100% height. Why? Well...technically, it is...but it's parent isn't. So like a brave Tee-Ball coach, we need to tell this element's parents what to do:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
http://jsfiddle.net/B6RH7/1/
Ta-da! Let me know if you need anymore clarification on how this applies to your scenario. :)
A little more directed at your specific goals, try this article explaining position: relative; for parent elements. If the parent element has attribute position: relative;, any child elements with position: absolute; will position themselves to the parent element.
I asked this question before and got pointed towards this link, which I followed and implemented the technique in my page:
Notice the announcement div and div next to it. I want the announcement div to be of the same height as it's counterpart.
What am i missing?
change the height of both divs to be the same
<div class="announcement" style="position: relative; width: 728px; height: 200px;"> <!--This is the containing div position: relative to flow in sequence with the rest of the page.-->
<div class="announcement" style="position: relative; width: 728px; height: 200px;">
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
</div>
for example will fix the height of this div no matter if there is one line in the div or 5 lines or whatever this height will remain the same.
PK
You didn't, so far as I can tell, attempt (or implement) the faux-columns technique you linked to in your question, however because there's no way of forcing, with css, two siblings to maintain the same height without explicitly defining a height, and since you're already using jQuery, I've come up with this cludgy and not-really-portable approach:
$('#container1 > div').each(
function(){
if ($(this).height() > $(this).next().height()){
$(this).next().css('height',$(this).height());
}
else {
$(this).css('height',$(this).next().height());
}
});
It's over at JS Bin for your perusal.