Spacing Error Between FIGURES

[kamie.richardson]

Hi,

I was hoping to have someone take a look at my coding to figure out why my figures and #floatleft aren’t cooperating with eachother.

I have internal CSS (it’s for a class project, instructor requires it, approves of outside assistance/tutoring) but I also have a hosted site you can refer to: http://www.kamierenae.webhostingforstudents.com/cas206/final_project/tours.html

PEN: https://codepen.io/kamierenae19/pen/qQgpJX

Thank you in advance!

[Beverleyh]

my figures and #floatleft aren’t cooperating with eachother.

What does “not cooperating” mean? What are they doing that is undesirable? What do you want them to do instead?

To attract more helpful responses, try reducing your code to the bare minimum to make it easier for us to troubleshoot. At the moment there is a lot of distraction and excess code. We don’t need your whole codebase and full page layout. We just need enough HTML and CSS to illustrate the issue with the floated element and figure.

Also consider using online placeholder images so that we’ve got something that loads.

[kamie.richardson]

Hi @Beverleyh,

Thank you for the reply.

My updated pen can be found here: https://codepen.io/kamierenae19/pen/qQgpJX

I am looking to avoid entering 4 breaks to separate the figures so that my #floatleft doesn’t skew the image and text positioning on the page.

Any help is appreciated :).

[Beverleyh]

so that my #floatleft doesn’t skew the image and text positioning on the page

That still doesn’t clearly explain the problem. I removed the br elements from figcaption but I still don’t immediately see what the issue is. Please describe what the undesirable behaviour is and also describe the desired outcome (state how they differ if necessary). Bear in mind that the device you’re looking at all this on isn’t going to be the same as what I and others are viewing on, and our choice of web browser or operating systems might be different still, with different font spacing, padding, margin, etc. We could see something very different to you. Vague terms such as “skew” or “cooperate” unfortunately aren’t very helpful in signposting the problem. Help us to help you.

The only thing I would guess at at this stage is the uncleared float that, when cleared, shows a light grey background around all the images and caption texts. Is that what we’re talking about? Are you wanting to know how to avoid the collapse? You might want to research “how to clear floats”. (During research you will come across hiding overflow or clearfix)

[Author]

Posts