Positioning items around the page without affecting the container

Okay, so thanks to this wonderful community, I’m making good progress with my tribute page and more importantly gaining a better understanding in the process.

I have a container to keep all the text central - which is great and what I wanted, the problem I have now though is, I want to add a few pictures like the one I’ve already added at various points on the page without dislodging the main content/container and to make sure the page is still responsive at the same time. I think currently, the picture I’ve added, overlaps the main content when the page shrinks or at least it does in the small (codepen windows).

I think what I’m trying to do is a little beyond my scope at this stage in my development as we’ve not covered it in the learning process and I’m probably biting off a little more than I can chew (stick to something simple I hear you say), but I’m almost there and the Polaroid photo effect would give the page a nice look. I simply want to place pictures at the side of the relevant paragraphs, for example, by the ‘early life’ paragraph (and I mean directly to the left of the paragraph), I want to stick a picture of young John, the next paragraph, I’d like to place an appropriate picture but to the right

A prod in the right direction would be greatly appreciated.

You can do this several ways.

Non-CSS:
Move your image inside the

tag of your paragraph and just use align= and hspace= in your img tag. Google to see what parameters you need for align and hspace.

CSS:
move your image before the

tag and use float: and padding-right/-left in your style property for the img tag.

Thanks for the response owel, though I’m not sure I fully understood - I think some of your message is missing (the crucial bits) which doesn’t help.

Just to clarify though, I don’t want the pictures inside the container - I want them to be outside but placed alongside relevant paragraphs. So the picture I currently have there would go alongside the ‘Early Life’ paragraph but outside of the container,

So you don’t mean like this?

Or like this?

The only problem with this layout is if you view the page on a mobile screen (or a narrow width browser window), the image is cutoff (since it’s being pushed to the left side).

This is the code for this:

<img src="https://image.ibb.co/m8t9Yv/boy.jpg" class="polaroid img" style="float:left;margin-left:-250px;"><p>Famed singer-songwriter John Winston Lennon was born on October 9, 1940, in Liverpool, Merseyside, England, during a German air raid in World War II.

1 Like

Yeah the second one was what I wanted but obviously, I need to keep it responsive, so I will sacrifice that idea.

I’m now trying to implement your first idea - which isn’t too difficult as such, if I simply put an image in there, however, I’m struggling to insert the whole .polaroid whilst wrapping the text around it like you did.

Additionally, there will be seven images in total all needing the same .polaroid effects. I thought I could change the div class for each image to .polaroid1 and .polaroid2 for example and then use the same CSS to style them (as they should all use the same styling) in this way:
.polaroid1 .polaroid2 { position: relative; width: 220px; }
However, as soon as I add .polaroid2 then .polaroid1 loses its style - do I really need to repeat this CSS seven separate times even though they would all be using the same effects? That would be messy.

Okay, several things.

One can make the 2nd option a Responsive design. You can have (2) divs containing the same image. One of the divs will be positioned outside your box, and the other div positioned within your paragraph - inside the box.

Then one would use the bootstrap classes hidden-xs, and visible-xs so you can control which div is visible when viewed on a small phone screen, and which div is visible on a desktop monitor. – maybe you can do this as an exercise/challenge.

On your css code above, you forgot the comma to separate .polaroid1 and polaroid2.

But, why duplicate and create another .polaroidX class? Just use the same class for all your div.

<div class="polaroid">
   stuff goes here
</div>

<div class="polaroid">
   different stuff goes here
</div>

1 Like

Hi there, I really appreciate you taking your time to help me out.

Whilst I was waiting for your advice, I got busy experimenting, trial and error style and I think I’ve done alright in the meantime. I figured out the comma between the .polaroid in the CSS and I also managed to place the images roughly where I wanted without losing the polaroid styling, although it doesn’t quite work when I test it non codepen (or non bootstrap) as the pictures cover the text.

It’s actually looking quite good for a first ever attempt at making my own page (if I do say so myself :smile:).

Regarding using the same .polaroid class for each image - it was because each image has three parts; div, img src and p - both the p and the img src changed every time. I’m trying to think if it caused me any problems but I had so many with the polaroid, I can’t remember if it did specifically or not.

I had to split the .polaroid into two CSS groups in the end so that I could position some on the left and some on the right which worked to my surprise (and elation).

I just looked again at the challenge and it has two targets for the tribute page, the first is to add an image the other is to add a link to another site - so I think I may have hit them okay.

I’m making a mental note of the bootstrap classes you mentioned as I’m sure I’ll make good use of them but I’m gonna finalise the project now - though I would appreciate it if you could take one last quick peep at the page to see if you can help me figure out why the images are overlapping text in a normal browser.