Left–right floating with text and images isn’t applied when text gets shorterWhat is the best way to indent text in a DIV when it wraps?Aligning HTML headings with hanging section numbers?Styling overlapping annotations in text with HTML <SPAN> tags and CSSZend PDF: How do I print bold text or text in another color etc?CSS: Image and text to the right on one line, no flow text?Mark words that blend in to the mark up perfectly and keep mark up validText file - define Placeholder, read out via PHP - generate HTML/CSS on WebsideWhy is this p tag being added as a new line?Is it possible, to flow a div container right next to the last line of a p?TYPO 7.6 Display Content
"My boss was furious with me and I have been fired" vs. "My boss was furious with me and I was fired"
How do I deal with a coworker that keeps asking to make small superficial changes to a report, and it is seriously triggering my anxiety?
How important is it that $TERM is correct?
What *exactly* is electrical current, voltage, and resistance?
What is the most expensive material in the world that could be used to create Pun-Pun's lute?
Extracting Dirichlet series coefficients
How much of a wave function must reside inside event horizon for it to be consumed by the black hole?
How to have a sharp product image?
Can a Bard use the Spell Glyph option of the Glyph of Warding spell and cast a known spell into the glyph?
Was Dennis Ritchie being too modest in this quote about C and Pascal?
Does a large simulator bay have standard public address announcements?
Work requires me to come in early to start computer but wont let me clock in to get paid for it
A strange hotel
How to pronounce 'c++' in Spanish
Negative Resistance
Magical attacks and overcoming damage resistance
Why is the underscore command _ useful?
Multiple options vs single option UI
Why do real positive eigenvalues result in an unstable system? What about eigenvalues between 0 and 1? or 1?
I preordered a game on my Xbox while on the home screen of my friend's account. Which of us owns the game?
What is purpose of DB Browser(dbbrowser.aspx) under admin tool?
Contradiction proof for inequality of P and NP?
Is there any pythonic way to find average of specific tuple elements in array?
Injection into a proper class and choice without regularity
Left–right floating with text and images isn’t applied when text gets shorter
What is the best way to indent text in a DIV when it wraps?Aligning HTML headings with hanging section numbers?Styling overlapping annotations in text with HTML <SPAN> tags and CSSZend PDF: How do I print bold text or text in another color etc?CSS: Image and text to the right on one line, no flow text?Mark words that blend in to the mark up perfectly and keep mark up validText file - define Placeholder, read out via PHP - generate HTML/CSS on WebsideWhy is this p tag being added as a new line?Is it possible, to flow a div container right next to the last line of a p?TYPO 7.6 Display Content
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I wanted to make text with the image left and then text with the image right. On small screens the image should appear on top of the text. Everything worked fine until the text is getting shorter.
How it looks with long text:
It’s working with some simple CSS for different margin on different screen sizes. But the problem is if the text gets shorter the flaoting doesn’t work properly anymore.
How it looks with long text:
Here is the code I “produced”:
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>html css responsive-design css-float
edited Mar 22 at 17:17
Sebastian Simon
10.6k63251
asked Mar 22 at 16:27
McLevaMcLeva
61
add a comment |
1
I wanted to make text with the image left and then text with the image right. On small screens the image should appear on top of the text. Everything worked fine until the text is getting shorter.
How it looks with long text:
It’s working with some simple CSS for different margin on different screen sizes. But the problem is if the text gets shorter the flaoting doesn’t work properly anymore.
How it looks with long text:
Here is the code I “produced”:
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>html css responsive-design css-float
edited Mar 22 at 17:17
Sebastian Simon
10.6k63251
asked Mar 22 at 16:27
McLevaMcLeva
61
Floating is working it's just that you need to read more carefully w3schools.com/cssref/pr_class_float.asp
– loki
Mar 22 at 16:42
add a comment |
1
1
1
I wanted to make text with the image left and then text with the image right. On small screens the image should appear on top of the text. Everything worked fine until the text is getting shorter.
How it looks with long text:
It’s working with some simple CSS for different margin on different screen sizes. But the problem is if the text gets shorter the flaoting doesn’t work properly anymore.
How it looks with long text:
Here is the code I “produced”:
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>html css responsive-design css-float
edited Mar 22 at 17:17
Sebastian Simon
10.6k63251
asked Mar 22 at 16:27
McLevaMcLeva
61
I wanted to make text with the image left and then text with the image right. On small screens the image should appear on top of the text. Everything worked fine until the text is getting shorter.
How it looks with long text:
It’s working with some simple CSS for different margin on different screen sizes. But the problem is if the text gets shorter the flaoting doesn’t work properly anymore.
How it looks with long text:
Here is the code I “produced”:
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div><style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div><style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div style="clear: both;"></div>html css responsive-design css-float
html css responsive-design css-float
edited Mar 22 at 17:17
Sebastian Simon
10.6k63251
asked Mar 22 at 16:27
McLevaMcLeva
61
edited Mar 22 at 17:17
Sebastian Simon
10.6k63251
asked Mar 22 at 16:27
McLevaMcLeva
61
edited Mar 22 at 17:17
Sebastian Simon
10.6k63251
edited Mar 22 at 17:17
Sebastian Simon
10.6k63251
edited Mar 22 at 17:17
Sebastian Simon
10.6k63251
10.6k63251
asked Mar 22 at 16:27
McLevaMcLeva
61
asked Mar 22 at 16:27
McLevaMcLeva
61
asked Mar 22 at 16:27
McLevaMcLeva
61
61
Floating is working it's just that you need to read more carefully w3schools.com/cssref/pr_class_float.asp
– loki
Mar 22 at 16:42
add a comment |
Floating is working it's just that you need to read more carefully w3schools.com/cssref/pr_class_float.asp
– loki
Mar 22 at 16:42
Floating is working it's just that you need to read more carefully w3schools.com/cssref/pr_class_float.asp
– loki
Mar 22 at 16:42
Floating is working it's just that you need to read more carefully w3schools.com/cssref/pr_class_float.asp
– loki
Mar 22 at 16:42
add a comment |
2 Answers
2
active
oldest
votes
0
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elit.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>answered Apr 11 at 6:58
TejendraTejendra
111
add a comment |
-1
You could try to make the image and the text floating too.
This way it could works.
Change the <p> for a <span>, because <p> tag is inherently display: block;, and will not float.
edited Mar 22 at 17:23
Sebastian Simon
10.6k63251
answered Mar 22 at 17:22
Marc Ramiro AlpuenteMarc Ramiro Alpuente
294
If it’s just that, why not just usedisplay: inline;on the<p>?
– Sebastian Simon
Mar 22 at 17:24
Because I think if you are going to override the principal characteristic of a p, maybe you don't need a p tag, anyway, overriding the display:block will also work properly.
– Marc Ramiro Alpuente
Mar 22 at 17:26
When you actually try this, it still doesn’t work, anyway.
– Sebastian Simon
Mar 22 at 17:26
Remove the floats on the containers or set them to width: 100%. That's the short answer. In the long answer I would have to recommend flex, not using <hr> etc.
– Kjetil Hansen
Mar 22 at 17:55
The tips from @KjetilHansen worked both. Thank you so much. I´m sure there is a more beautiful or professional way to solve this with flex but now it´s working and so it´s good enough for me.
– McLeva
Mar 26 at 13:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55303947%2fleft-right-floating-with-text-and-images-isn-t-applied-when-text-gets-shorter%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elit.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>answered Apr 11 at 6:58
TejendraTejendra
111
add a comment |
0
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elit.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>answered Apr 11 at 6:58
TejendraTejendra
111
add a comment |
0
0
0
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elit.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>answered Apr 11 at 6:58
TejendraTejendra
111
<style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elit.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div><style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elit.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div><style>
<!-- @media (min-width: 591px)
.imagerightmargin
margin-left: 40px;
@media (min-width: 591px)
.imageleftmargin
margin-right: 40px;
@media (max-width: 590px)
.textmargin
margin-top: 320px !important;
-->
</style>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="float: left; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: left;" class="imageleftmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elit.
</p>
</div>
<div style="clear: both;"></div>
<hr style=" border:none; border-top:4px dotted #ccc; width:100%;">
<div style="margin-top:20px,"></div>
<div style="float: right; vertical-align:middle;width:100%;">
<img alt="" src="//cdn.shopify.com/s/files/1/1357/3133/files/platzhalter.jpg?v=1553247050" style="float: right;" class="imagerightmargin">
<h3 class="textmargin">
Some Headline
</h3>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div style="clear: both;"></div>answered Apr 11 at 6:58
TejendraTejendra
111
answered Apr 11 at 6:58
TejendraTejendra
111
answered Apr 11 at 6:58
TejendraTejendra
111
answered Apr 11 at 6:58
TejendraTejendra
111
111
add a comment |
add a comment |
-1
You could try to make the image and the text floating too.
This way it could works.
Change the <p> for a <span>, because <p> tag is inherently display: block;, and will not float.
edited Mar 22 at 17:23
Sebastian Simon
10.6k63251
answered Mar 22 at 17:22
Marc Ramiro AlpuenteMarc Ramiro Alpuente
294
If it’s just that, why not just usedisplay: inline;on the<p>?
– Sebastian Simon
Mar 22 at 17:24
Because I think if you are going to override the principal characteristic of a p, maybe you don't need a p tag, anyway, overriding the display:block will also work properly.
– Marc Ramiro Alpuente
Mar 22 at 17:26
When you actually try this, it still doesn’t work, anyway.
– Sebastian Simon
Mar 22 at 17:26
Remove the floats on the containers or set them to width: 100%. That's the short answer. In the long answer I would have to recommend flex, not using <hr> etc.
– Kjetil Hansen
Mar 22 at 17:55
The tips from @KjetilHansen worked both. Thank you so much. I´m sure there is a more beautiful or professional way to solve this with flex but now it´s working and so it´s good enough for me.
– McLeva
Mar 26 at 13:38
add a comment |
-1
You could try to make the image and the text floating too.
This way it could works.
Change the <p> for a <span>, because <p> tag is inherently display: block;, and will not float.
edited Mar 22 at 17:23
Sebastian Simon
10.6k63251
answered Mar 22 at 17:22
Marc Ramiro AlpuenteMarc Ramiro Alpuente
294
If it’s just that, why not just usedisplay: inline;on the<p>?
– Sebastian Simon
Mar 22 at 17:24
Because I think if you are going to override the principal characteristic of a p, maybe you don't need a p tag, anyway, overriding the display:block will also work properly.
– Marc Ramiro Alpuente
Mar 22 at 17:26
When you actually try this, it still doesn’t work, anyway.
– Sebastian Simon
Mar 22 at 17:26
Remove the floats on the containers or set them to width: 100%. That's the short answer. In the long answer I would have to recommend flex, not using <hr> etc.
– Kjetil Hansen
Mar 22 at 17:55
The tips from @KjetilHansen worked both. Thank you so much. I´m sure there is a more beautiful or professional way to solve this with flex but now it´s working and so it´s good enough for me.
– McLeva
Mar 26 at 13:38
add a comment |
-1
-1
-1
You could try to make the image and the text floating too.
This way it could works.
Change the <p> for a <span>, because <p> tag is inherently display: block;, and will not float.
edited Mar 22 at 17:23
Sebastian Simon
10.6k63251
answered Mar 22 at 17:22
Marc Ramiro AlpuenteMarc Ramiro Alpuente
294
You could try to make the image and the text floating too.
This way it could works.
Change the <p> for a <span>, because <p> tag is inherently display: block;, and will not float.
edited Mar 22 at 17:23
Sebastian Simon
10.6k63251
answered Mar 22 at 17:22
Marc Ramiro AlpuenteMarc Ramiro Alpuente
294
edited Mar 22 at 17:23
Sebastian Simon
10.6k63251
edited Mar 22 at 17:23
Sebastian Simon
10.6k63251
edited Mar 22 at 17:23
Sebastian Simon
10.6k63251
10.6k63251
answered Mar 22 at 17:22
Marc Ramiro AlpuenteMarc Ramiro Alpuente
294
answered Mar 22 at 17:22
Marc Ramiro AlpuenteMarc Ramiro Alpuente
294
answered Mar 22 at 17:22
Marc Ramiro AlpuenteMarc Ramiro Alpuente
294
294
If it’s just that, why not just usedisplay: inline;on the<p>?
– Sebastian Simon
Mar 22 at 17:24
Because I think if you are going to override the principal characteristic of a p, maybe you don't need a p tag, anyway, overriding the display:block will also work properly.
– Marc Ramiro Alpuente
Mar 22 at 17:26
When you actually try this, it still doesn’t work, anyway.
– Sebastian Simon
Mar 22 at 17:26
Remove the floats on the containers or set them to width: 100%. That's the short answer. In the long answer I would have to recommend flex, not using <hr> etc.
– Kjetil Hansen
Mar 22 at 17:55
The tips from @KjetilHansen worked both. Thank you so much. I´m sure there is a more beautiful or professional way to solve this with flex but now it´s working and so it´s good enough for me.
– McLeva
Mar 26 at 13:38
add a comment |
If it’s just that, why not just usedisplay: inline;on the<p>?
– Sebastian Simon
Mar 22 at 17:24
Because I think if you are going to override the principal characteristic of a p, maybe you don't need a p tag, anyway, overriding the display:block will also work properly.
– Marc Ramiro Alpuente
Mar 22 at 17:26
When you actually try this, it still doesn’t work, anyway.
– Sebastian Simon
Mar 22 at 17:26
Remove the floats on the containers or set them to width: 100%. That's the short answer. In the long answer I would have to recommend flex, not using <hr> etc.
– Kjetil Hansen
Mar 22 at 17:55
The tips from @KjetilHansen worked both. Thank you so much. I´m sure there is a more beautiful or professional way to solve this with flex but now it´s working and so it´s good enough for me.
– McLeva
Mar 26 at 13:38
If it’s just that, why not just use
display: inline; on the <p>?– Sebastian Simon
Mar 22 at 17:24
If it’s just that, why not just use
display: inline; on the <p>?– Sebastian Simon
Mar 22 at 17:24
Because I think if you are going to override the principal characteristic of a p, maybe you don't need a p tag, anyway, overriding the display:block will also work properly.
– Marc Ramiro Alpuente
Mar 22 at 17:26
Because I think if you are going to override the principal characteristic of a p, maybe you don't need a p tag, anyway, overriding the display:block will also work properly.
– Marc Ramiro Alpuente
Mar 22 at 17:26
When you actually try this, it still doesn’t work, anyway.
– Sebastian Simon
Mar 22 at 17:26
When you actually try this, it still doesn’t work, anyway.
– Sebastian Simon
Mar 22 at 17:26
Remove the floats on the containers or set them to width: 100%. That's the short answer. In the long answer I would have to recommend flex, not using <hr> etc.
– Kjetil Hansen
Mar 22 at 17:55
Remove the floats on the containers or set them to width: 100%. That's the short answer. In the long answer I would have to recommend flex, not using <hr> etc.
– Kjetil Hansen
Mar 22 at 17:55
The tips from @KjetilHansen worked both. Thank you so much. I´m sure there is a more beautiful or professional way to solve this with flex but now it´s working and so it´s good enough for me.
– McLeva
Mar 26 at 13:38
The tips from @KjetilHansen worked both. Thank you so much. I´m sure there is a more beautiful or professional way to solve this with flex but now it´s working and so it´s good enough for me.
– McLeva
Mar 26 at 13:38
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55303947%2fleft-right-floating-with-text-and-images-isn-t-applied-when-text-gets-shorter%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Floating is working it's just that you need to read more carefully w3schools.com/cssref/pr_class_float.asp
– loki
Mar 22 at 16:42