Highlighted

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

Participant ,
Mar 03, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

Views

471

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Participant ,
Mar 03, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

Views

472

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 03, 2018 0
Adobe Community Professional ,
Mar 04, 2018

Copy link to clipboard

Copied

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>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2018 0
Participant ,
Jul 13, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2018 0