Is there an easy way (without manually setting any heights) to make sure a parent element always wraps/contains a child, even if the child has been relatively positioned?
<div style="background-color: red;">
<div style="background-color: pink; position: relative; top: 20px">
one.
</div>
</div>
<div>
two.
</div>
In the example above the "one." div flows out of its parent and overlaps/hides the "two." div, but my desired effect is to have the parent div contain the whole of the child and the "two." element flowing underneath.
top is used to position element so that it has no effect on the surrounding elements. Use margin-top if you want to affect the parent as well, otherwise top doesn't affect the other elements.
<div style="background-color: red; display: flex;">
<div style="background-color: pink; position: relative; margin-top: 20px">
one.
</div>
</div>
<div>
two.
</div>
Related
I need to position the img element (along with other related info about the project) to the bottom right corner of the div with class 'projectItem green'.
Positioning works fine but I cannot get the img element under two parent divs to be visible on the screen. The element highlighting actually highlights the element but your can only see the grid around invisible element.
I tried to use that z-index with the img element instead of the div. I also tried to add display:block parameter to the img element and use z-index there.
Thanx a lot for any pointers!
Here is my code
<div class="projectItem green">
<div class="projectNumber">I-8000</div>
<div title="Testprojekt 25.05.2018" class="halfWidth">Testprojekt 25.05.2018</div>
<div class="halfWidth"><span>Start: </span><span>5/25/2018</span></div>
<div title="" class="halfWidth">UserName</div>
<div class="halfWidth"><span>End: </span><span style="margin-left: 8px;">6/1/2020</span></div>
<div class="halfWidth">Last status update:</div>
<div class="halfWidth"><span style="margin-left: 43px;">5/25/2018</span></div>
<div style="width: 100%; display: inline-block; position: relative; z-index: 1000;"><img style="position: absolute; bottom: 0; right: 0"
src="/system/pscbaf/ImagesLogos/IPM/IPM_NotReported_Icon.PNG">
</div>
</div>
Here is the screenshot from DOM
Here is what I am getting
Here is what I am trying to achieve
Given this example:
<div class="main">
<div class="container">
<div id="banner-message">
<p>I want to be hidden</p>
<p id="el">I want to be visible</p>
</div>
</div>
</div>
the .main and the .container have position:relative, the #banner-message and the #el have position: absolute because I need to move them around inside the .container which has overflow: hidden with the purpose of hidding all elements that overflow, except the #el, and here is my question:
Given this structure and positioning is it possible to make only #el visible when it overflows the .container?
heres's a fiddle as repro:
https://jsfiddle.net/k5w6stuL/
I want to position divs according their placing order but they are not following each other. I want second div follow first div right after it(downwards).
<body>
<div id="first" style="display:block;width:20%;height:100px;position:relative;top:50px;border:2px solid green;">
</div>
<div id="second" style="background-color:lightgrey;position:relative;display:block;width:20%;height:30px;border:1px solid red;">
<div style="position:relative;display:block;">
Hello!
</div>
</div>
</body>
You simply should delete the position:relative style in your first of your divs.
<body>
<div id="first" style="display:block;width:20%;height:100px;top:50px;border:2px solid green;">
</div>
<div id="second" style="background-color:lightgrey;position:relative;display:block;width:20%;height:30px;border:1px solid red;">
<div style="position:relative;display:block;">
Hello!
</div>
</div>
</body>
Check here: https://jsfiddle.net/dnvabqgx/1/
Why do position:relative matters
This type of positioning is probably the most confusing and misused. What it really means is "relative to itself".
If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static;
But if you DO give it some other positioning attribute, say, top: 50p; as you don in your first div, it will shift it's position 50 pixels DOWN from where it would NORMALLY be.
--read about all the position properties here
In response to your question of 'why position:relative matters?'; position relative moves an element into normal flow, allowing it to be positioned on the web page using the offset properties like top, right, bottom and down.
I Want to place a div over another div without using height in pixels.I have used this code
<div style="position: relative;height:78px;">
<div style="width:425px;position: absolute;top: 0;left: 0;">
Content for First div
</div>
<div style="z-index:10;position:absolute;top: 0;left: 0;">
Content for Second div
</div>
</div>
The first div content will change dynamically . So is their any way to put height auto some thing like in parent div
both child divs are taken out of the flow, so the parent will have no natural height (which normally is "stretched" by it's children).
since you have pre-loaded data on the first child div, make the second match to it.
HTML:
<div id="parent">
<div id="firstChild">
Content for First div
</div>
<div id="secondChild">
Content for Second div
</div>
</div>
CSS:
#parent{
position:relative;
}
#firstChild{
width:425px;
}
#secondChild{
width:425px;
position:absolute;
top:0;
bottom:0;
}
NOTE: watch out for collisions in your styles, i used ID here. replace accordingly
height: 100% should make it the height of the parent div which is 78px;
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.