I have recreated my problem on this pen:
https://codepen.io/brennerp/pen/wOEebK
.example {
margin-right: 100px;
height: 100px;
max-width: 130px;
font-size: 16px;
line-height: 24px;
white-space: normal;
word-break: break-word;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
top: calc(50% - 8px);
right: -21px;
width: 16px;
height: 16px;
border-radius: 50%;
background: blue;
}
<div class="example">
<span>
<span class="relative">
<span class="relative__label">
Wrong one asdsdasadsadsdasadas ts asdsadasdasdsadsajdkhsdjahas
</span>
<div class="absolute"></div>
</span>
</span>
</div>
I wanted to have a text of any size with an element absolute-positioned by its end, does not matter what size the text is. I have a relative-positioned inline element with two children: one inline element with its text and other absolute-positioned element with top:0 and right:0.
Just like the "Right one test[...]" example, the little blue circle is at the end and aligns with the middle of the text. However, the "right" property of the absolute element seems to respect one of the SMALLER LINES. In other words, if "right: 0;", the absolute element does not go to the right end of the relative element, but to the end of one of the smaller lines, just like the "Wrong one [...]" example. Which is NOT what I want. I want it to respect the size of the relative element, just like I forced on the CodePen.
Does anyone know the reason for the "right" property to respect the smallest line and not the relative element's width? Is that how inline elements work? Is there a solution for what I want: an absolute element that respects the end of a text element, whether if its 20px or 300px wide (just like the examples I put)?
Related
Here is the jsfiddle to illustrate my question.
I have a floated div with no height (.card). It contains a nested div (.image) with an image. The image makes the bounding box of .card expand to wrap the image.
However, when I nest a second div (.text) inside .card as a sibling to .image and use negative margin-top to position .text in top of the image, the image no longer manages to expand the bounding-box of .card to match the bottom of the image. The bottom-boundary of .card instead creeps up and follows the bottom boundary of .text.
Why does not the image succeed in expanding its grand-parent any longer when .text is present?
<div class="card">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
</div>
<div class="card">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
<div class="text"></div>
</div>
img {
display: block;
}
.card {
border: 1px solid black; //shows where the bounding-box of this div is
width: 200px;
position: relative;
float: left;
}
.text {
width: 100px;
height: 100px;
background-color: red;
margin-top: -120px;
position: relative;
}
If m not wrong to get your point then you are missing position:absolute.
Remember you can fix position of inside element only when parent div is relative and inside element absolute.
UPDATED
This issue is occurring because you are trying to use .txt(child) inside .card(parent) with position relative but with wrong way. Remember whenever you are using position, parent should be relative and child will be absolute so child will move inside parent container without breaking the flow(in your case it is affecting the parent div and breaking the border) so to over come this issue use position:absolute on child and then you can use .txt class with ease.
Just change position: relative; to position: absolute; in .text class and you are done.
See here
I have some text formed of a sequence of span elements with some text in each. In front of each span element I want to put a little dot using the :before element (in fact, what I'm trying to do is position a tooltip following this method).
I've noticed a problem when the text is in a fixed-width container. When a span gets forced to a new line because of the width of the container, the :before element gets "left behind".
JSFiddle: https://jsfiddle.net/ngvyqy0o/
Notice how the :before elements on the "banana" and "pomegranite" spans aren't positioned where the spans actually are, they're positioned where they would have been had the spans not been pushed to the next line. Is there a work around?
This is for use in a Firefox addon, so I'm only interested in Firefox compatibility.
Give inline-block display to the span:
div {
width: 100px;
height: 100px;
background-color: pink;
position: relative;
}
span {
display: inline-block;
}
span:before {
position: absolute;
width: 5px;
height: 5px;
background-color: blue;
content: " ";
}
<div>
<span>apple</span>
<span>orange</span>
<span>banana</span>
<span>pear</span>
<span>pomegranate</span>
</div>
Here is the demo:
http://jsfiddle.net/53eP6/
<div class="container">
<span class="small">small text</span>
<div class="big">Big elements to be ignored</div>
</div>
The right element is the one I want to ignore ( in real-life experience, this might be some irregular size imgs)
So the parent element will have a fix height (by its padding and children's height ), rather than expand to fit the height of the big element that I want to ignore.
Simply floating the element would be ideal as it will still retain padding information from the parent to align top part correctly with the sibling inline element.
Fiddle: http://jsfiddle.net/Varinder/eg7DW/1/
Edit
fixed height on .container element
.container{
padding: 10px;
background:green;
height:20px
}
Fiddle: http://jsfiddle.net/Varinder/eg7DW/3/
.container {
position: relative;
display: inline;
}
.big {
position: absolute;
top: 0px;
left: 100%;
}
http://jsfiddle.net/e3vMn/
Given the following CSS:
body {
font-family: Corbel, Calibri, Verdana, Helvetica, sans-serif;
font-size: 9pt;'
}
.heb {
font-family: Bwhebb;
}
.heb, .eng {
font-size: 25pt;
cursor: pointer;
display:none;
}
.slideshow, .cardface, .card {
width: 100%;
height: 15%;
text-align: center;
position: absolute;
}
and the following HTML
<div class="card" id="wordID">
<span class='heb cardface'>
some word
</span>
<br />
<div class='eng cardface'>
some translation
<br />
<a href='#' class='right' >correct</a> |
<a href='#' class='wrong' >incorrect</a>
</div>
</div>
I get two different results on Chrome and Firefox. Chrome centers everything on the page while Firefox places the span .heb .cardface WAAAAAYYYYYYYYYYYYYYY to the right.
I am pretty sure I'm doing something wrong, could you help me figure it out?
If I remove position: absolute; from your CSS, in the last line, having .slideshow, .cardface, .card {width: 100%; height: 15%; text-align: center;}, it is all centered.
Is that what you're after?
You have an absolutely positioned div with an auto left offset. That means its left edge should be placed where it would go if its position were static.... and since the parent element has centered text, that means at the center of the parent element. Chrome gets this right if you have any text in the parent element, but wrong if the parent element has only positioned kids. See the testcases at https://bugzilla.mozilla.org/show_bug.cgi?id=671491
Oh, and the upshot is that left: 0 should do what you want, I would assume.
The problem in firefox is that <div class="card" id="wordID"> is in absolute position, and <span class='heb cardface'>some word</span> is also in absolute position.
You can either remove the absolute positionning, according to #Nightfirecat suggestion.
Or you can remove the absolute positionning for either .card or .cardface. It's better if you remove it from .cardface, since then, .card content will be what's inside .cardface (Remember : Positionning something in absolute moves it out of it context! Aka, the parent element won't use it to define it's size/will act quirky.)
Yes, I know doesn't work with position absolute, but is there a way to display elements "below" (after in code) not behind them?
Example:
<img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" />
<h2 style="padding: 15px" >This text is behind not below the image</h2>
Is there a way of displaying the h2 below the image excepting positioning it absolutely too?
Example:
http://jsfiddle.net/fDGHU/1/
(yes, I have to use absolute in my case, and dynamic margined content below, and I'm lost :D)
The only way I was able to do what you are asking is setting the top property of h2, aka positioning the text after the image. Fiddle.
PS: position:block doesn't exist. Only absolute, relative, static, and fixed.
For h2:
specify a top margin equal to the height of your image.
eg.
img {
position: absolute;
top: 0;
}
h2 {
margin-top: 400px;
padding: 40px;
}
Simple , just remove position absolute . (tested)
If an object is not defined it will automatically go to the right of its neighbour or below
How about wrapping the image and the title in an absolute block? This solution puts the title after the image because h2 is a block by default and your content is still absolutely positionned.
<style type="text/css">
.wrapper{
position: absolute;
top: 0;
}
h2 {
padding: 40px;
}
</style>
<div class="wrapper">
<img src="image_url" alt="image!" />
<h2>Am I invisible? (not!)</h2>
</div>