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.
Related
I'm trying to stack these images as shown using CSS and I'm stuck I've tired position absolute and it isn't working
hero section of a website for a beauty brand
I'm not exactly sure what you're trying to achieve, but I think you want to stack elements with a position absolute. Try using z-index. With z-index u can specify the position of the z-axis of an element. This only works on elements with a position: absolute. The z-index can also be a negative value. (See example below)
.square {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.circle {
width: 100px;
height: 100px;
position: absolute;
z-index:2;
background-color: blue;
border-radius: 50%;
}
<!--See that even though the square div comes first the circle is on top?
This is cause of the usage of the z-index.
Remove the z-index and the circle will dissapear behind the square.-->
<div class="circle"></div>
<div class="square"></div>
)
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.
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 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.
How we can add a div tag over a slideshow like in the following link
http://www.hellofresh.com/
Here the div with title "DISCOVER THE JOY OF COOKING " is placed over a slideshow.
How might I do this?
First of all, welcome to Stackoverflow (oops; this isn't your first question!). The key to placing your div over the slideshow (or over any other element) is using absolute positioning. Absolute positioning enables you to specify the exact position for an element instead of leaving it with the flow of the document. If you take a look at your example website's CSS, you can see that the div that has "Discover the joy of cooking" is styled basically like this:
position: absolute;
top: 0px;
left: 0px;
top and left act somehow like x and y in a 2-dimensional grid system, except that the origin is placed differently. top: 0px; pulls the div up and left: 0px; pulls the div left, so all-in-all, it's placed on the upper-left corner.
To achieve the effect of the translucent black, you use the opacity property. opacity: 0.5; means that the div is half-opaque, while opacity: 0; means it's not visible at all. Your favorite value might be something like opacity: 0.7; -- anything in the range 0...1.
The last piece here is to tell the browser that the div should be over the slideshow, not behind it. To do that, use the z-index property. z-index specifies the relative "stack order" of elements. So if you want your div to be over the slideshow, style it with z-index: 5; while styling the slideshow with z-index: 1;, for instance.
Hope that helped at all!
Ok, you can do something like this ( http://jsfiddle.net/YgpqX/ ):
<div class="div1"></div>
<div class="div2"></div>
.div1 {
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
width: 100px;
height: 100px;
margin-top: -200px;
background: #5aa;
}
Or ( http://jsfiddle.net/YgpqX/1/ )
<div class="div1"></div>
<div class="div2"></div>
.div1 {
position: relative;
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
position: relative;
width: 100px;
height: 100px;
top: -200px;
background: #5aa;
}
And if your block in html should be earlier then slider block, then use z-index: 9999; to get it up.
And also abolute position:
<div class="div1">
<div class="div2"></div>
</div>
.div1 {
position: relative;
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
background: #5aa;
}
By setting the opacity property in CSS
This is some basic info on this one W3schools Css opaque
They are accomplishing this effect using CSS Positioning. Basically they are absolutely positioning the discover the joy of cooking block over the slide show. You can use z-index on the absolute position div to bring it over the relative position (slideshow) div. Basically you need to use a combination of position and z-index. I have a basic example of the CSS/HTML here: http://jsfiddle.net/jqVAe/1/
HTML:
<div id="slideshow">
Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here.Scrolling sideshow goes here.
<div id="over-slideshow"></div>
</div>
CSS:
#slideshow{
width: 400px;
height: 200px;
position: relative;
background: green;
}
#over-slideshow{
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background: red;
}
This provides a basic structure in which to put your slideshow. I would recommend finding a good slide show plugin and not trying to reinvent that functionality. I'm sure there are plenty of Jquery (Javascript Framework) plugins that will accomplish this task for you.
You may try position: absolute and z-index. z index is used to align a layer over or under a layer. You may go through;
Lesson 15: Layer on layer with z-index (Layers), Understanding CSS z-index, and A Detailed Look at the z-index CSS Property