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.
Related
This question already has answers here:
text-align justify not working
(11 answers)
Closed 3 years ago.
I'm trying to display a block of text with word-wrap but uses a variable size of white spacing so the text fills the width of the box evenly on each line. (see picture)
I'm stumped on this one and google searches haven't come up with anything. I'm also utilizing bootstrap and jquery in the site, so if either of those can create a solution that would be fine too.
You need to justify the text. Use the text-align: justify to do that. More information can be found on CSS Tricks.
.text-justified {
width: 200px;
text-align: justify; /* this is the important line, it justifies the text */
border: solid black 2px;
padding: 5px;
}
<p class="text-justified">This text will be justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor felis et augue tristique euismod. Mauris at rutrum justo. Aenean mollis rutrum arcu, vitae feugiat dolor pharetra et. </p>
I've read a few solutions with similar titles but none with a solution to this layout.
I have 3 content blocks which all stack beneath each other at most screen widths.
However, when content become overly wide, I want to display a slightly different format.
I want to display the media to the right and the title and text to the left with the text directly beneath the title. It currently sits below the media block (as per the snippet).
anyone know how I can fix it?
.content {
overflow:hidden;
}
.chart {
height: 200px;
width: 200px;
background-color: red;
}
.title, .text {
float:left;
}
.media {
float:right;
}
<div class="content">
<h3 class="title">This is a reasonably long title</h3>
<div class="media">
<div class="chart"></div>
</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non urna est. Quisque sed dolor ac ex aliquet aliquet. Integer ornare, velit vitae iaculis faucibus, nulla libero molestie sem, eget placerat augue massa vitae justo.</p>
</div>
There are 2 things you need to do:
1) You need to add a width for your text block, cause now it's 100% and it takes 100% of parent block width - so no floating will be.
2) You need to add to text block a clear property with left value - cause you don't need it to be floated by the headerfrom the left side.
It's all you need to solve the issue:
.text {
clear: left;
width: 50%; /* put your own width (no matter percents or pixels), but it must be less than (parent block width - media width)*/
}
Check here the example: https://codepen.io/fox_hover/pen/8f838b7799db7a3ed4f4d742097440ef
While both previous answers do work to some degree, both fail to fully address the initial question.
The first, requires a change in the order of elements and the second applying a fixed width which was restrictive.
The final solution is in 2 parts so that it works with multiple screen sizes and media queries.
Firstly I changed the order of the elements as per answer 1. This enabled me to achieve the layout required for my 8 column (wide layout). I applied this styling using an 8 column only media query.
For all other screen sizes, I use display flexbox, which allows me to restore the order I require.
Not sure what the problem is: http://watercookies.topfloorstudio.com/
If you scroll down to "Latest News", I'm trying to get the div with the class .newscontentright to be inline with the image on the left. I've wasted too much time trying to figure it out on my own. Any help?
You need to set the width of newscontentright
.newscontentright {
width: 300px;
}
And remove the following from between newscontentleft and newscontentright
<div style="clear:both;"></div>
As a side note, learn to lay out pages without using clear. Use clear only when absolutely necessary, otherwise things get messy. 'Overflow: auto' is often a better solution.
In this particular case the clear is completely unnecessary so just remove it.
maybe try your clear before your first float?
<div style="clear:both;"></div>
<div class="newscontentleft">
<img class="imageshadow" width="178" height="122" alt="news1" src="images/news1.jpg">
</div>
<div class="newscontentright">
<h3>Fall Blue Ridge Parkway “Bike for the French Broad”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, turpis ut hendrerit porttitor, lectus ipsumegestas sapien, ac tristique metus quam id est. </p>
<a> href="#">Read the full article »</a>
</div>
This renders the same in Chrome and FireFox so maybe this is intended behavior but it seems pretty screwy. Putting a image in the h2 tag at the top of a div with "display:table-cell" causes extra padding to the top of the other table-cell divs roughly the same size as the image.
Here's my test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chrome Test</title>
<style>
#col3 {
display:table;
border:1px solid black;
}
#col3 div {
width:33%;
display:table-cell;
border:1px solid blue;
}
</style>
</head>
<body>
<h2>Wrong?</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div>
<h2><img src="url" height="80" width="215" alt="heading 2" /></h2>
<p>Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
<h2>Right</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, </p>
</div>
<div>
<h2>Heading 2</h2>
<p><img src="url" height="80" width="215" alt="heading 2" />Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
</body>
</html>
Is this a bug? Can I avoid this behavior?
An h2 tag is a block element and may have some default padding assigned to it by the browser. Be sure to include a CSS Reset file (for example, this one), to remove that unwanted formatting.
Based on your given code i create the fiddle below -
Fiddle: http://jsfiddle.net/TtYn3/
Demo: http://jsfiddle.net/TtYn3/embedded/result/
As per required image in H2 tag and the padding issue solved in other columns.
Your divs are table cells and you don't set any vertical-align anywhere, so everything ends up baseline-aligned. The baseline of a cell is the bottom of the first line of text (more or less), so the bottoms of the first lines end up vertically aligned with each other. If the lines have very different heights (as in this case, because the image gives its line an 80px ascent), you get white gaps above the shorter lines.
If you don't want the cells to baseline-align, set their vertical-align to whatever value you want (sounds like top in your case).
Because you have display set to table-cell, your divs will behave just like they are in a table, and will stretch to the height of your tallest div (in each case, the div with the image inside an <h2>.
Second, you are using <div id="col3">. Id is only to be used in CSS for when you will call that CSS only once. You should assign col3 to a class instead of id, so that it can be used over and over on your page.
If you remove the display:table and table-cell attributes, your divs should shrink to their correct sizes.
Also, display:table-cell does not work in IE6 or IE7 (not that big of an issue these days, but still).
H tags and P tags always have default top and bottom padding / margins and it depends on the browser. I always set a class for them and set the margin to 0 and the padding to 0 unless I'm looking for some spacing, in which case I will set my own via css.
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.