Is it possible to make a responsive image a percentage width of screen float right?

Report · Mar 03, 2018

Hello all,

Working on a website trying to get an image to be a certain percentage width of its container float right (or left) of text, allowing the text to wrap around on wider screens and tablets, and then slide under the text on phone screens.

I know I can control this by responsive columns but then the text in the adjacent column (obviously) won't wrap.

Is there a way to set an image in the same container as the text so that it will be a percentage of that column?

Thanks for any info or help.

Dave

Report · Mar 04, 2018

Is this what you are looking for?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
max-width: 75em;
margin: auto;
padding: 0 1em;
}
main img {
width: 100%;
}
@media only screen and (min-width: 38em) {
aside {
width: 25%;
float: left;
}
main {
width: 75%;
float: left;
}
main img {
max-width: 60%;
float: right;
margin-left: 1em;
}
}
</style>
</head>
<body>
<aside>
<h3>MySidebar</h3>
</aside>
<main>
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem unde, numquam error sit nulla placeat fugit alias ullam officiis voluptas mollitia beatae minus aspernatur est molestias porro quidem enim tenetur.</p>
<p>Animi, incidunt aut mollitia eos deserunt velit nemo. Inventore animi omnis eum quas! Culpa dolore sit officia debitis. Sapiente iure quia quas laboriosam maxime ea eaque odit, incidunt esse impedit.</p>
<img src="http://lorempixel.com/output/city-q-c-640-480-10.jpg" alt="My City">
<p>Voluptatum vero numquam sunt, dicta. Tempora recusandae nam, autem natus cupiditate illum omnis obcaecati magnam inventore consequatur odio perferendis. Ducimus voluptatum suscipit, aperiam esse explicabo nam praesentium dignissimos est assumenda.</p>
<p>Quos blanditiis, dolores aliquid sequi esse excepturi provident explicabo veniam culpa labore aperiam voluptatum facere quia iste, illum, tempora dolorum quasi. Doloremque similique eos, enim veniam numquam atque in nisi.</p>
<p>Ipsum officiis odit a cum error in quidem, officia dolorum iure dignissimos. Voluptas neque, magni repudiandae quasi, consequuntur ducimus id. Facere aspernatur perferendis quibusdam, illum. Molestias quaerat, mollitia quisquam excepturi!</p>
</main>
</body>
</html>

Wappler, the only real Dreamweaver alternative.

Report · Jul 13, 2018

Most likely, although what I had ended up working regardless. Thanks for the reply!

Adobe Community

Is it possible to make a responsive image a percentage width of screen float right?

1 Correct answer