I have an inline element with relative positioning and multiline content.
It also contains a child with an absolute positioning.
So i want to align this child to the right position of the parent element (a code snippet below).
But the lines have different length, and child element is aligned to a shorter one of the lines.
The first question is why this happening?
And the second one: is the any way to fix this problem?
.container {
max-width: 150px;
background: lightgray;
}
.parent {
background: lightblue;
position: relative;
}
.child {
position: absolute;
width: 20px;
height: 10px;
background: salmon;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
right:0;
}
<div class="container">
<span class="parent">
Looooooooooooong Text here
<div class="child"></div>
</span>
</div>
It does not align to the shorter line, it aligns to the last line because it appears after that line in the HTML markup.
You can set the display mode of .parent to display: inline-block; in order to give it block boundaries, it makes more sense than positionning an element absoultely in relation to a normal inline layout.
Also, .child should be a <span> as well, <div> is a block element and it is not valid to put it inside a <span> which is an inline element[1]. The browser is forgiving and letting it work but you should avoid such a situation.
[1] In HTML5 the terms "block element" and "inline element" was replaced with another model, but the prencip still applies
.container {
max-width: 150px;
background: lightgray;
}
.parent {
background: lightblue;
position: relative;
display: inline-block;
}
.child {
position: absolute;
width: 20px;
height: 10px;
background: salmon;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
right:0;
}
<div class="container">
<span class="parent">
Looooooooooooong Text Here
<span class="child"></span>
</span>
</div>
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a parent div and two child divs. The second child div is variable height, but is absolutely positioned at the bottom of the parent div.
I want the first div to have a dynamic height based on the second div. I thought margin-bottom: 10px would specify the height of the first div to go up until 10px of the second div, but apparently this is not true.
Is there any workaround to get what I want?
HTML:
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >
</div>
</div>
CSS:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%;
}
JSFiddle:
https://jsfiddle.net/4tjqsron/2/
The margin-bottom is only telling the browser "don't let anything come within 10px of the bottom of me," as you found out.
I think this may be an excellent opportunity to use the calc() css function!
Try this:
.first {
background-color: green;
height: calc(100% - 110px);
}
This should leave a 10px space between your first and second child element.
Basically it is telling the browser that the first element is to take up 100% of its parent minus 110px.
Please see this for more info on the calc() function.
https://www.w3schools.com/cssref/func_calc.asp
I hope this helps!
EDIT: It just occurred to me that this only works if your height is set elsewhere. You may need to adjust your use of the 100% argument depending on your current parent height settings. Even if this is the case, the calc() function should still prove useful.
I am not get your point very clearly, here is my solution that div.second will always align on the bottom of div.parent vertically:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
/* height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%; */
max-height: 100%;
position: absolute;
top: auto;
bottom: 0;
}
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >No matter how many content in this div, it will always lie on the bottom of the parent div</div>
</div>
I do not understand whats wrong with my code. I mean, section element has the height, display value of my DIV element is definitly block and i really dont know how it works and how to combine these two elements differently positioned. Please give me your solutions and advices to learn something new today.
div {
position: relative;
margin: 0 30%;
}
div section {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
You want your hr on the bottom of the first div, right ?
However, this is not working because the parent div have an default height: auto property.
This mean that the parent div will have the height of his children.
When you set a position: absolute on a child, you are breaking this system.
The parent will no longer take care of his child.
So, if you want to make it works, you have two solutions:
- set a custom height (height: 100px) on the parent div (not good)
- remove the absolute position on the child section (default :position: relative)
div {
position: relative;
margin: 0 30%;
}
div section {
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
Your element has height set to AUTO. If you want to change your div height you need to write this in css.
div {
position: relative;
margin: 0 30%;
height: 200px;
background-color: red;
}
I think This is because your div has no height itself that's why it is not visible and it is increasing according to its child element which is section and is in absoulute position. I am not sure what you are up to but If you want to show the section inside the div along with the div's height the you must include the css for your div .
I provided an assumption solution for you hope it helps you
div {
position: relative;
margin: 0 30%;
background-color: green;
height: 150px;
}
section {
position: absolute;
top: 50px;
right: 0;
left: 0;
height: 50px;
background-color: yellow;
}
div hr {
height: 10px;
background-color: red;
}
<html>
<head>
</head>
<body>
<div>
<p>your div</p>
<hr>
<section>your section</section>
</div>
</body>
</html>
What's the proper way to position an HTML element according to a center handle?
In this example:
XXXXXXXXX
|
|
123px
Assume the element should be position at absolute position left: 123px; but the text should be centered at that point, not start at it. The element text is dynamic, so I have no way of setting a static negative margin-left on it.
Is there a pure CSS way to achieve this? The JS way of measuring offsetWidth and then setting left after calculating width / 2 won't neccesarily work in my case due to various limitations.
One posibility is to set a transform translateX -50%
p {
position: relative;
display: inline-block;
left: 100px;
transform: translateX(-50%);
}
<p>ONE</p>
<br>
<p>TWO, LONGER</p>
<br>
<p>THREE, the longest</p>
It's fairly easy to achieve that and there are several ways to do it. Since you didn't post any HTML construct for your example, I'll just make up some.
The trick is to have an inline-block parent element which has the desired offset (123px) and inside that element you'll have another inline-block element with a left margin of -50%. Position both relative and you'll have the effect you are looking for.
#container {
position: relative;
}
#line {
width: 100px;
height: 100px;
left: 123px;
position: absolute;
border-left: 1px solid red;
}
#text {
left: 123px;
top: 50px;
display: inline-block;
position: relative;
}
#text p {
position: relative;
background: green;
margin-left: -50%;
display: inline-block;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
<div id="container">
<div id="line">
<-- 123px
</div>
<div id="text">
<p>
This is some dynamic text<br>the div has no absolute set width.
</p>
</div></div>
There are other ways as mentioned, probably depends on your general layout/HTML structure. I would definitely take a look at the flex-box properties, this might also be suitable here.
If you want to play around with it, here's a fiddle.
Some of various ways to do this with css:
If your element is a block:
.element{
width: 200px; /* Full width */
left: 50%;
margin-left: -100px; /* Half width */
position: absolute;
display: block;
}
or, if you're using css3:
.element{
width: 200px; /* Full width */
left: calc(50% - 100px);
position: absolute;
display: block;
}
You can also have a non-absolute approach, but the parent element position should be relative:
.element-parent{
position: relative;
}
.element-parent .element{
margin: 0 auto;
}
If you use text-oriented element (inline-block), this works with IE 7+:
.element-parent{
text-align: center;
}
.element-parent .element{
display: inline-block;
}
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}
Here's the fiddle: http://jsfiddle.net/gBQqQ/
Here's the html:
<div id='testtexture'>
<div id='testinside'>
<div style='vertical-align: top;' class='test'></div>
</div>
</div>
And the css:
.test {
width: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
min-height: 130px;
height:auto;
padding-bottom:50px;
background:blue;
}
#testtexture {
width: 100%;
position: relative;
top: 10px;
}
#testinside {
z-index: 3;
background:red;
position:relative;
}
I do not see why there is an issue. I expect either there is something obvious that I am missing, or there is an underlying issue which means I cannot make the red div go above the blue div- maybe because it is a child of the blue div?
Generally not the best idea to have a child div you want to appear behind it's parent. Usually you would take the child div outside the parent to do this. Nonetheless it is possible. Add z-index:-1 to the child div and remove position:relative from the parent.
HTML
<div id='testtexture'>
<div id='testinside'>
<div class="test"></div>
</div>
</div>
CSS
.test {
position: relative;
z-index: -1;
width: 50px;
margin: 0 auto;
height: auto;
min-height: 130px;
padding-bottom: 50px;
background: blue; }
#testinside { background: red; }
See fiddle: http://jsfiddle.net/gBQqQ/1/
If you use firebug, you can see div.test is still there in the correct position behind it's parent. As a side note, the styling vertical-align you had on a div won't do anything.