Proper HTML rather than lots of nbsp 's (non-breaking spaces)?

Question

Hi Everyone,

I have a page template which looks like this:

H1 (Page Heading)

Intro Paragraph (54 Words)

H2 (Subheading 1)
Image
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)

H2 (Subheading 2)
Image
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)

H2 (Subheading 3)
Image
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)
nbsp (non-breaking space)

-If I don't include all of the nbsp's (non-breaking spaces) then all of the content (sub headings and images) below the intro paragraph will sort of be overlapping each other cascading down one line and to the right each time...

The problem is that on smaller devices if I've added seven non breaking spaces there are seven blank lines in between each subheading and image combination. -On desktop and tablet devices it doesn't look like there are seven blank lines, it only looks as though there is one which is what I want to achieve with the proper HTML (and so that on smaller devices there doesn't look like there many blank lines)

Andy

Answer 1

Html Space Nbsp

Answer 2

You are definitely misusing nbsps—these are only meant to keep spaces from being broken by automatic line breaks (a non-breaking space). If you need space after the image, it should be done with CSS.



Try wrapping your images in DIV or P containers.

Answer 3

There's probably something messed up with the styles you're using, and all images are being set to float; why don't you post your wordpress site so we can take a look...?

Answer 4

- Solution: I deselected Align Left from the Visual Editor for the images and removed all of the unnecessary nbsp's and the problem is now solved! None of the content overlaps and it looks as it should.