I've got a text-paragraph and a button.
I want to display the button right-aligned below the text but I can't quite get it to work.
This is how it currently looks like:
How can I do this WITHOUT float (it falls in the element below it if I set float: right)
Just use the desired vertical-align, e.g.
button {
vertical-align: -75%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
<button>Button</button>
</p>
This could do it width inline-block + transform.
JsFiddle
a {
display: inline-block;
background: yellow;
padding: 5px 10px;
transform: translateY(100%);
}
I've got a text-paragraph and a button. I want to display the button right-aligned below the text but I can't quite get it to work.
Link text
Is this what you're looking for?
div {
width: 400px;
}
button {
display: inline-block;
background: orange;
padding: 5px 10px;
margin-left: 300px;
width: 100px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<button>Click Me</button>
One way could be putting it in a div, with the width set to 100% (that is, if the div and paragraph share parents) and then set the divs text-align to right.
<div>
<p>....</p>
<div style="width:100%; text-align:right;">
<button>click here</button>
</div>
</div>
If I understand your question correctly, the following fiddle should work. Here is the fiddle: http://jsfiddle.net/cLyycy3d/
CSS:
button {
float: right;
}
Related
I am trying to create a layout with absolute positioning elements something like this:
As you can see, the elements are overlapping and not clearing properly. Perhaps there is a very simple fix but I have been unable to figure out how to resolve this.
.main-block .main-wrapper {
margin-bottom: 4rem;
}
.main-block .main-wrapper:nth-child(odd) .main-box {
height: 100%;
}
.main-block .main-wrapper:nth-child(odd) .main-box .image-container {
width: 440px;
}
.main-block .main-wrapper:nth-child(odd) .main-box .text-container {
background-color: #8EFFFF;
position: absolute;
width: 720px;
top: 3rem;
z-index: -1;
right: 15px;
padding: 4em 5em;
}
.main-block .main-wrapper:nth-child(even) .main-box {
height: 100%;
}
.main-block .main-wrapper:nth-child(even) .main-box .image-container {
width: 440px;
position: absolute;
right: 15px;
}
.main-block .main-wrapper:nth-child(even) .main-box .text-container {
background-color: #8EFFFF;
position: relative;
width: 720px;
z-index: -1;
padding: 4em 5em;
top: 3rem;
}
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<main role="main" id="content" class="site-content">
<section class="py-5 main-block">
<div class="container">
<div class="row">
<div class="col-lg">
<h2 class="text-blue-dark mb-5">Cursus euismod quis</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12 main-wrapper">
<div class="main-box">
<div class="image-container"><img src="https://dummyimage.com/440x440/6b59b3/fff"></div>
<div class="text-container">
<h5 class="font-weight-bold">Lorem ipsum dolor sit amet</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
at tellus at urna condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
</div>
</div>
</div>
</div>
<div class="col-lg-12 main-wrapper">
<div class="main-box">
<div class="image-container"><img src="https://dummyimage.com/440x440/76b359/fff"></div>
<div class="text-container">
<h5 class="font-weight-bold">Sit amet aliquam</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
at tellus at urna condimentum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
You don't need absolute positioning here. It can be a real pain for complex layouts. I'd use conventional Bootstrap columns and shift things a bit with negative margins.
.main-block .main-wrapper {
margin-top: 3rem;
}
.main-block .image-container {
width: calc(100% + 2rem);
}
.main-block .main-wrapper:nth-child(odd) .image-container {
margin-left: -2rem;
}
.main-block .image-container img {
margin-top: -2rem;
}
.main-block .main-wrapper .text-container {
background-color: #8EFFFF;
padding: 4rem 5rem;
z-index: -1;
}
.main-block .main-wrapper:nth-child(odd) .text-container {
margin-right: -2rem;
}
.main-block .main-wrapper:nth-child(even) .text-container {
margin-left: -2rem;
}
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<main role="main" id="content" class="site-content">
<section class="container py-5 main-block">
<div class="row">
<div class="col">
<h2 class="text-blue-dark mb-5">Cursus euismod quis</h2>
</div>
</div>
<div class="row main-wrapper">
<div class="col-4">
<div class="image-container">
<img class="img-fluid" src="https://dummyimage.com/440x440/6b59b3/fff">
</div>
</div>
<div class="col-8 text-container">
<h5 class="font-weight-bold">Lorem ipsum dolor sit amet</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer malesuada
nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum suspendisse
ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna
condimentum.
</p>
</div>
</div>
</div>
<div class="row main-wrapper">
<div class="col-8 text-container">
<h5 class="font-weight-bold">Sit amet aliquam</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer malesuada
nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum suspendisse
ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna
condimentum.
</p>
</div>
</div>
<div class="col-4">
<div class="image-container">
<img class="img-fluid" src="https://dummyimage.com/440x440/76b359/fff">
</div>
</div>
</div>
</section>
</main>
</body>
I want to make sliding out on hover widgets with text. I want to make semicircles with the main heading. When you hover on the semicircle, the text should appear. I am currently standing on it
My actual code:
<div class="col-md-4 box_industries">
<div>
<div class="image fill">
O nas
</div>
<div class="content">
<h5>O nas</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula auctor vulputate. Aenean massa lectus, tempor hendrerit faucibus eu, euismod sit amet lorem. Aliquam ante arcu, tempor id augue eget, tristique tincidunt ipsum. Phasellus dignissim eu nisl in commodo. Maecenas erat diam, tristique eu arcu vulputate, vehicula vulputate tellus.
</div>
</div>
</div>
.box_industries
{
background: grey;
overflow: hidden;
text-align: center;
position: relative;
min-height:300px;
border-radius:999px;
color:#fff;
}
.box_industries .content
{
background: rgba( 0, 0, 0, 0.9 );
bottom: -100%;
color: #fff;
height: 100%;
left: 0%;
text-align: center;
position: absolute;
transition: bottom 0.5s ease;
width: 100%;
font-size:14px;
}
.box_industries:hover .content
{
bottom: 0%;
}
Try to use CSS :hover Selector. Example: div:hover {top: 100px;} but it will be work only when mouse still over the element, or you can change the top using JS: document.getElementById("elem").style.top = "100px"; but if cursor goes out the element it will be having a top 100px (not past value);
Here's what I'd do - use simple hover effects as ch1puha mentions, add some transition duration. I've put together an example for you: https://jsfiddle.net/59tvxe2f/
<div id="container">
<div class="circle">
<h2>HOVER ME</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
/* Globals */
html, body {height:100%; margin:0; padding:0;}
* {box-sizing: border-box;}
#container {
padding:20px;
}
.circle {
margin:0 auto;
height:200px;
width:200px;
background-color:red;
border-radius:100px;
transition:300ms;
text-align:center;
color:white;
font-family:Arial, sans-serif;
font-size:20px;
}
.circle:hover {
height:500px;
transition:300ms;
}
.circle:hover > h2{
padding-top:75px;
transition:300ms;
}
.circle:hover > p{
opacity:1;
transition:300ms;
}
h2 {padding-top:85px; transition:300ms;}
p {font-size:16px;padding:20px; opacity:0; transition:300ms;}
Scenario :
I can't figure out how to have a 50% opacity "box" behind a text that just cover the text and not a whole square.
I have a h2-tag that i have specified this CSS to:
background: rgba(0, 0, 0, 0.5);
width: fit-content;
Problem :
I tried the same thing on a p-tag, but that does not work...
this is working fine. Check This
h2{
background: rgba(0, 0, 0, 0.5);
width: fit-content;
}
p{
background: rgba(0, 0, 0, 0.5);
width: fit-content;
}
<h2>Some Text Here</h2>
<p>Some Text Here</p>
if you want color behind the text then use <mark> tag
mark{
background: rgba(0, 0, 0, 0.5);
}
<mark> test</mark>
Try this way.
p{
background: rgb(0, 0, 0 , 0.5);
opacity: 0.5;
}
<p>Hello world</p>
This is works for me. :)
You need an inline element like <span> and apply the same color to this inline element. Other wise you can apply display:inline to your <p>.
p{
background: rgba(255, 0, 0, .5);
display: inline;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus risus, tincidunt vel accumsan et, tempus placerat nisi. Suspendisse ornare, elit vitae vulputate pulvinar, arcu mi pretium lorem, et ultricies elit purus interdum nulla. Suspendisse vel erat id tellus venenatis viverra. Donec et mauris efficitur<p>
Hope this is you are looking for.
.back {
background-color: red;
width: 100%;
height: 200px;
text-align: center;
padding-top: 20px;
}
h2 {
color: #000000;
font-size: 35px;
font-weight: 900;
}
p {
color: #ffffff;
font-size: 16px;
}
<div class="back">
<h2>This is h2 text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>
Please check the above code.
p{
background-color:lightgreen;
margin:10px;
}
p.p{
background-color:lightpink;
margin:10px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="p">Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p class="p">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
<p class="p"> Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
You make the <p> inline. See below snippet.
This also work with width: 100%;.
p {
background: rgba(255, 0, 0, 0.2);
width: auto;
display: inline;
}
<p>
hello world
</p>
I have a div block which contains an image and text:
<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
<div style="position: absolute; top: 50px; left: 78px;">
<p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
</div>
</div>
I've applied margin-bottom: 90px; on the parent div to create a gap between the div and any p tags which may be below it.
It works fine on full display, but on mobile, it looks like this:
As you can see, it's overlapping the following p tags after the div. How can I fix this? Ideally I want a 20px gap between the parent div and anything outside the div.
Edit:
I feel like my approach is wrong. I.e. if I remove margin-bottom: 90px; from the code above, the div will still overlap any following p tags:
The reason why other elements are overlapping your quote element, is because the element which is primarily deciding the height of the element (the div which contains the paragraph) is having an absolute position. An absolute positioned element is no longer part of the parent (unless the parent has a relative position). So, in this case, because the div with the paragraph is no longer 'part' of the parent, the parent will only have a height based on the static/relative positioned elements. Which is the image.
As a solution you can switch the absolute position of your p element to the img element. You know the width and the height of the image, so you can set a padding for your paragraph element. In this case the height of the parent div (which is called .quote-wrapper in my example) will have the correct height so elements above or below .quote-wrapper won't overlap your element.
.quote-wrapper {
padding: 40px 0;
}
.quote-wrapper .quote-image {
width: 120px;
height: 100px;
position: absolute;
}
/* Set position to relative so the element won't be overlapped by the image */
.quote-wrapper > p {
font-family: AvenirLight;
color: #74818a;
font-size: 36px;
line-height: 45px;
font-style: italic;
padding: 80px 0 0 80px;
margin: 0;
position: relative;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="quote-wrapper">
<img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" class="quote-image" />
<p>
“Enabling understanding means being able to communicate effectively”
</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
You can put margin-top inside the tag p. I recommend that you put an id or class for each tag (div,p...), to make the structure easier and that labels do not overlap.
Try editing your html code this way and add this media query to your code.
<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
<div style="position: absolute; top: 50px; left: 78px;" class="quotation">
<p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
</div>
</div>
#media screen and (max-width: 767px) {
.quatation {
position: static !important;
}
}
The problem is that is position absolute on title. i recommended following structure for free hesitate for all resolutions and devices.
.block-quote {
display:block;
margin:0;
padding:20px 0 0 70px;
background:url(https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png) 0 0 no-repeat;
}
h2 {
font-family: 'AvenirLight';
color: #74818a;
font-size: 36px;
line-height: 45px;
font-style: italic;
}
<div class="block-quote">
<h2>“Enabling understanding means being able to communicate effectively”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin vulputate vehicula. Morbi fermentum elit lobortis nibh molestie, nec facilisis elit tempor. Nullam porta lectus erat, et hendrerit diam dictum at. Vestibulum sed enim turpis. Sed vehicula venenatis cursus. Mauris sit amet venenatis velit. Nullam ut purus erat. Nam posuere lorem at est ultrices luctus.</p>
</div>
I am developing an application that lets businesses post to a noticeboard. Each post is a div of 320px width. The content of the post is in paragraphs and at the foot of the post, I am putting the business' logo, as follows:
<div class="post">
<p>Lorum ipsum ...</p>
<p>Lorum ipsum ...</p>
<img src="...">
</div>
The logo doesn't look very good just plonked at the bottom of the post, so now I am trying to visually integrate it better. I would like to float it to the right, and push it up, say, 30px, and have the text flow around it.
I have tried floating right and setting a negative top margin, but this just put the image under (or over) the paragraph text. I tried putting it inside the ending p tag, with similar results. I also tried changing the display to inline-block (instead of floating it), but got similar results again.
By definition of floats that is not possible.
Thus you have two options:
A. To reorder DOM elements (by JS) and so you will have rest of the text wrapping around that floating image:
<div class="post">
<img src="..." float="right">
<p>Lorum ipsum ...</p>
<p>Lorum ipsum ...</p>
</div>
B. Drop the text wrapping requirement. In this case you can use you markup as it is now:
<div class="post">
<p>Lorum ipsum ...</p>
<p>Lorum ipsum ...</p>
<img src="...">
</div>
but with these styles:
.post { position: relative; }
.post > p { margin-right: XXXpx; /* room for the image */ }
.post img { position:absolute; right:0; top:0 } /* move it to top/right corner */
There are no other options with modern CSS : either to reorder DOM or to drop text wrapping.
You are probably going to need to move the image up to the top. Once you do that getting things to fall into place will be a snap. I added a code snippet below. I used a square div to stand in for an image but the concept is the same for real images.
.img {
display: block;
width: 50px;
height: 50px;
float: left;
background: blue;
margin: 0 10px 10px 0;
}
<div>
<div class="img"></div>
<p>This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</p>
<p>This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</p>
</div>
Alternatively, if you must have the image last for some reason there will not be a good way to have the text wrap under the image. But you can djust the img to the top like so:
.container {
position: relative;
}
p {
margin-left: 60px;
}
.img {
background: blue;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<p>This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</p>
<p>This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</p>
<div class="img"></div>
</div>
On an aside, you can also use js to reposition the image after the document has already loaded as well.
Try applying .css to the image directly using a class tag.
<img class="imgleft" src="image.jpg">
and in your .css file something like this:
.imgleft {
float: left;
border: 1px solid #90b905;
margin: 5px 10px 10px 15px;
padding: 5px;
}
If the size of the image is known before hand, you can reserve space for the image with a pseudo element
.post {
width: 320px;
border: 1px solid red;
position: relative;
}
.post:before {
content: "";
width: 80px;
height: 80px;
float: right;
background-color: lightgreen;
}
.likeimg {
width: 40px;
height: 40px;
background: red;
top: 20px;
right: 20px;
position: absolute;
}
<div class="post">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<div class="likeimg"></div>
</div>
The green box is the pseudo element (made green just for demo purposes), that in the dom is in the appropiate place to make it float. (before the ps)
Then, the image if absolutely positioned in the reserved place
.post {
width: 320px;
border: 1px solid red;
position: relative;
}
p
{
text-align:justify;
word-break:break-all;
}
.post:before {
content: "";
width: 80px;
height: 80px;
float: right;
}
.likeimg {
width: 40px;
height: 40px;
background: red;
top: 20px;
right: 20px;
position: absolute;
}
<div class="post">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<div class="likeimg"></div>
</div>
i hope this may help you
This is the simple one I think. Just place your image inside the first <p> tag, as in:
<div class="post">
<p><img src="..."> Lorum ipsum ...</p>
<p>Lorum ipsum ...</p>
</div>
Then floating it to the right and push it up and have the text flow around it.
But before it, add new class selector inside the image
, say, .imgfloat. so, that will be like this:
<div class="post">
<p><img class="imgfloat" src="...." alt=""/> Lorum ipsum ...</p>
<p>..Lorum ipsum ......</p>
</div>
Next, add the property and the value of the selector, like this:
.imgfloat{
float:right;
margin-left:17px;
margin-top:1px;
margin-right:1px;
margin-bottom:7px;
text-align:justify;
}
So, the display would be like this:
For Demo, visit Here.
Hope this helps you.
Float the image right, and everything else left.
.post p {
float: left;
clear: left;
}
.post img {
float: right;
}
See Fiddle
If your logos are relatively small, it might be enough just to float the last non-image element left, e.g.
.post p:last-child {
float: left;
}
You could try floating the image (I've used a div to simulate the image in the sample below) before the last paragraph and then adding float:none to the last paragraph:
<div style="width:320px;">
<div style="float:left; width:30%; height:100px; background:#ebebeb; margin:10px 10px 0 0"></div>
<p style="float:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat sem quis erat tincidunt facilisis. In posuere urna at ex porttitor, id maximus ex aliquam. Morbi orci lectus, dapibus venenatis suscipit ac, mattis in lectus. Integer a feugiat ex.
Donec non nibh sit amet mi lacinia dignissim. Mauris nulla turpis, volutpat a iaculis ac, elementum vel ipsum. Nulla sed sem sagittis, posuere neque eget, fermentum ex. Etiam mollis pharetra lorem, id tincidunt nisi scelerisque in. Integer et leo
laoreet, facilisis sapien a, vulputate urna. Vestibulum at interdum est, sit amet tincidunt neque. Donec luctus justo vel justo pellentesque, in congue.</p>
</div>
The layout you want to achieve can be done only using Javascript, as in this example where we use jQuery WrapLines to divide paragraph in lines that have class line and CSS:
.post p:last-of-type .line:nth-last-of-type(2):before {
content: ' ';
display: block;
width: 105px;
height: 35px;
float: right;
}
.post img {
float: right;
position: relative;
bottom: 45px;
}
JS part is simple:
$(".post p").wraplines({
lineClassPrefix: 'line line_'
});
It is still not perfect, because after adding the block the text may expand for one line more.
If you want a pure CSS solution, than simply float last paragraph left, as in this example using following CSS:
.post p {
overflow: hidden;
margin: 0 0 10px;
}
.post p:last-of-type {
float: left;
width: calc(100% - 105px);
}
but text does not wrap around and this may look good only if paragraph is short or if the logo is higher. Here is an example with square logo on the left.
Using this post as a reference, maybe this is what you're looking for:
#content {
position: relative;
}
.text {
float: left;
width: 400px;
text-align: justify;
}
.floatingBox {
width: 50px;
height: 50px;
background-color: blue;
}
#lfb {
float: right;
margin: 10px 0px 0px 10px;
}
And in the html:
<div id="content">
<div class="text">This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.<div id="lfb" class="floatingBox"></div>This is some text and so on and so This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth. This is some text and so on and so forth.</div>
</div>
I've got a semi-solution, which works by moving the image down relative from the top of the last paragraph.
body {
width: 320px;
margin: 0 auto;
}
.offset-image {
float: left;
height: 80px;
width: 1px;
margin-left: -1px;
}
img {
display: block;
float: right;
clear: left;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi numquam, dignissimos odit expedita. Blanditiis repudiandae expedita quos reiciendis natus consequuntur deleniti harum quisquam quidem, dignissimos accusamus laudantium, facere ullam commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi numquam, dignissimos odit expedita. Blanditiis repudiandae expedita quos reiciendis natus consequuntur deleniti harum quisquam quidem, dignissimos accusamus laudantium, facere ullam commodi!</p>
<div class="offset-image"></div>
<img src="http://placehold.it/140x100">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi numquam, dignissimos odit expedita. Blanditiis repudiandae expedita quos reiciendis natus consequuntur deleniti harum quisquam quidem, dignissimos accusamus laudantium, facere ullam commodi!
</p>
We use an extra div.offset-image to push the image down. By styling it with float: left; width: 1px; and margin-left: -1px; to make sure the div itself isn't visible. On the image element, we provide a clear: left; so it's actually forced to move the height of the div.offset-image down.
The last paragraph item comes after the div.offset-image and the image element in the hmtl structure and will therefore naturally flow around these two floated elements.
You could improve this by adding a little bit of javascript into the mix. Set the height of the div.offset-image to the height of the last paragraph minus an x amount of pixels, to always render your image at the same distance from the bottom of the last paragraph.
Another fix can be to move the image before the paragraphs in the document flow, assign it float:right and a fixed dimension,
and you're done!!
.post {
width: 320px;
border: 1px solid magenta;
position: relative;
}
.likeimg {
width: 66px;
height: 66px;
background: yellow;
float:right;
display:inline-block;
margin:15px;
}
<div class="post">
<div class="likeimg"></div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>