Here is the code: http://jsfiddle.net/ym2GQ/
p {
background: lightblue;
}
.end {
background: orange;
float: right;
display: inline;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing orci at tortor bibendum suscipit et eu eros. Nunc congue, ante nec egestas fringilla, ipsum est porttitor leo, tempus lacinia augue erat posuere elit.
</p>
<div class="end">$$</div>
I want the floating $$ to be within the paragraph before it. It should align with the lasts line in the paragraph but it should be floated to right.
How can this be done? Please note that I have to solve this problem under the constraint that I can not float the paragraph element that comes before the div element. I can do whatever I want with the DIV element though. I can also move around the DIV element to some other part of the code if necessary.
Given your new information that you want it at the bottom right of the paragraph, see this live example: http://jsfiddle.net/AGEus/1/
In short:
Make the <div> a <span> and place it as a child of the paragraph.
Make the paragraph position:relative (so that it establishes its own coordinate system)
Put some padding in the paragraph on the right side so that the contents of .end won't overlap the text.
Absolutely position and size the .end to the bottom right of the paragraph.
HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<span class="end">$$</span>
</p>
CSS:
p { position:relative; padding-right:2em }
p .end { position:absolute; right:0; bottom:0; width:2em }
Replacing the DIV with a SPAN, and moving the inside the P seems to work. You can optionally set the SPAN to inline-block depending on the contents.
If you put the SPAN before the text, it will be near the top. If you put it after, it will be at the bottom.
demo
Ok, played with your code and found the solution. You need to set the p tag to display: inline and float the div to the right. I updated your fiddle for you.
If I understand you right, you want that the div is displayed over your paragraph.
For that you could just set the div to position absolute and set the exact position with top, left, right, bottom.
Related
I have
<div id="aboutPyKov">
<h2 id="pyKovSubheading">About PyKov</h2>
<p id="pyKovIs">Lorem ipsum dolor sit amet,<br/>consectetur
adipiscing elit.<br/>Vestibulum congue mattis odio.<br/>Nulla f
acilisi. Quisque tempus<br/>varius enim, quis mattis metus,
<br/>auctor quis. Lorem ipsum dolor sit<br/>amet, consectetur
adipiscing elit.<br/>Pellentesque a euismod sem, a<br/>convallis
turpis. Donec aliquet<br/>quis leo at fermentum. Maecenas<br/>ut
lacinia magna. Maecenas gravida<br/>interdum turpis non
fermentum.</p>
</div>
For styling, I have
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
}
This works fine, however it shows a dotted border around the whole width of the whole page. I want it to be self-contained, but instead, it goes around the whole screen as you can see in this picture. How do I make it so it only goes around the text? Also, the top border is hugging the background color above it. I would also like to know how to change that.
This is CSS level 1: block and inline. Block elements take up 100% of available width unless you set them to float or set an explicit width. Either set the border to the paragraph element or set a width to your div.
Try adding padding = 0px" to your <p> tag and <h2> tag,
p, h2 {
padding: 0px;
}
because <p> and <h2> tags have default padding applied.
Just change the display attribute
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
display:inline-block; // just change the display
}
Stack Overflow has questions asking how to both left-align and right-align text on 1 line. I couldn't find an answer that works for multi-line text.
How do I right-align an inline element on its own line within a paragraph of text that wraps around multiple lines? When the inline element is in the middle of a line, it should skip past the text in its way and be at the end of the current line.
Example Code:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
<span class="lil-green"></span>
elit. Pellentesque in vestibulum purus, et pharetra tellus. Etiam et ague tortor.
<span class="lil-red"></span>
</p>
Simple Mockup
The solution should work even when the text container element is resized.
This is exactly what the float property is for. Use float: right inside the rule of that element. You can learn more about the float property at MDN's article
right
The element must float on the right side of its containing block.
Float makes text wrap around an image or other element.
I have a weird issue where, when I hover on the pseudo element (::before) here, the highlight seems to be off.
The CSS given is:
.testimonial__quote::before {
content: open-quote;
font-size: 11.25rem;
width: 4.0625rem;
height: 3.4375rem;
position: absolute;
color: #fbce07;
display: block;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}
HTML:
<div class="testimonial__quote-container">
<blockquote class="testimonial__quote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus lorem eu aliquet fermentum. Vestibulum ante ipsum
primis in faucibus orci luctus.
</blockquote>
<p class="testimonial__author">- Scuderia Ferrari</p>
</div>
What am looking for is someone who has had an experience with this sort of issue. I can't post a JSFiddle as some people suggest, since it's not reproducible.
It's normal behavior. Jsfiddle.
You set width and height for block element (in your case it is presented by ::before pseudo element). But font-size of text is too big and symbol " "falls out" from sized container.
At the picture below I removed width and height properties. Now block sizes are calculated depending on block content (it is " symbol).
Add these styles to see that the character does not fit in the container:
overflow: hidden;
outline: 1px solid red;
So I think you should not set width and height to this element. Or you can use svg element or image with fixed sizes.
Please check this fiddle. Note: when you use position:absolute dont forgot to properties top, left, right, bottom,
https://jsfiddle.net/Lbctgyea/5/
PURPOSE
Having an editable div in which the text flows in different "simulated" pages, so to obtain an effect like Word. At the moment, I'm interested to have this working in Chrome (no crossbrowser compatibility).
WHAT I'VE DONE
I've created an editable div (pagina) already filled with some text. Inside this div there are 2 divs: block1 and block2.Block1 is a floating right div that simulates the page height.Block2 is a floating left div that simulate the space between pages.The effect I've obtained is a long text "broken" into pages. In my code I've used different background colors to have a better view of the various divs.
THE PROBLEM
When I move the cursor at the beginning of a new "page" and I press [return] more times, the new lines are moved at the right side of the above block2 div (the pages sepatator). If I type something, single letters appears in the right side (see screenshot below).
Problem screenshot
In this Fiddle (http://jsfiddle.net/n4d2jtd9/4/) you can see my experiments result.
.pagina {
width: 200px;
background-color: #AAA;
}
div.block1 {
float: right;
width: 100px;
height: 100px;
background-color: #CCC;
}
div.block2 {
float: left;
width: 200px;
height: 100px;
background-color: #FFF;
}
<body>
<div class="pagina">
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci
</div>
</div>
</body>
THE QUESTION
Is there a way to prevent that text effect?
CONSIDERATIONS
When you press [enter] inside an editable div, Chrome adds a div tag per paragraph (and a br tag when you press [enter]+[shift]).
The created "empty" div is always <div><br></div>. Having a zero width, the floating div moves this tag to right. I've noticed that if I put a space char inside the div, it works properly. Maybe jQuery can help.
New Code: based on browsers:
working demo: http://jsfiddle.net/n4d2jtd9/9/
HTML
<body>
<div class="pagina">
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div id="editable" contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci
</div>
</div>
</body>
CSS
#editable{white-space:normal}
}
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
#editable{white-space:pre-line;}
}
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0) {
.selector {-chrome-:only(;
#editable{white-space:pre-line;}
);}
}
I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.