Responsive Box Centered with Image Right and Text Left

[wismile]

My goal is to create a box with a 50% width, border and drop shadow. The box should be fully responsive and include an image on the right that uses 50% of the width and is flush top, right and bottom. On the left half I would like to have text that is aligned right.

Here’s what I have so far…

http://cdpn.io/iAhsd

I’m new here and obviously a novice!

This website looks like a great place to learn the proper way to accomplish my goals.

Thanks for your help!

[Paulie_D]

Like this? : http://codepen.io/Paulie-D/pen/ejlzp

[wismile]

very close…THANKS!

I can adjust the padding, but the drop shadow is gone on yours.

I’m trying to understand all this, so I have a question about what you did.

Every combination of “Float” I tried caused the border to collapse.

Was that problem fixed with this CSS code?…

img { display: block; }

[Paulie_D]

Box-shadow should be back now.

If you float all the items in a container it will collapse.

There are a number of ways to fix this, I chose the simple and quick one overflow:hidden. It’s called a ‘clearfix` so you can look into other methods.

[wismile]

Fabulous Paulie_D…Thanks for your help!

I can’t wait for the day someone invents a way to upload this type of knowledge directly into my aging brain cells.

In the meantime it’s nice to find a place with friendly knowledgeable people willing to share.

[Paulie_D]

Happy to help.

[servlet]

Hello

Nice trick!

Paulie_D what will be the code if we have 4 images with 3-4 paragraphs?

I did some test but there is no success.

[Paulie_D]

If you start a NEW question with YOUR code (ideally in a Codepen.io demo) we can take a look.

It’d be helpful if you also had an image of what look you are trying to achieve and what relationship the pictures have to the text.

[Author]

Posts