How to have a stack of floated divs lined up against a left aligned image

Using WordPress Post Type Builder, I created a CPT called Concerts. On a clean install of the theme on my server, I produced this result, which is structurally correct:
(*note that this example pushes the purple button to the top when container is made narrower (responsive); I dont want that behavior so I think I need to float all the divs?)

But once I moved it over to the client’s site, the elements no longer stack neatly next to the image:

here is my html and css:

(*You need to look at that in a wider window than what is shown on the sitepoint site–click on upper right, “Edit on CopdePen”)

I have a simplified version that seems to be working here:


Sorry that page is too risky for me to visit.

In your first example ( you don’t need to float all the stuff in the right column.

Just float the image block and then rest will wrap to the side automatically. If you don’t want the text to wrap underneath the image then place all the right side content in a parent div that has overflow:hidden applied and it will form a rectangular block to the side.

Unless you wanted some other type of behaviour of course?

1 Like

hi PaulOB,
try this url, or just click on the link to the codepen:

I was able to remake the template to eliminate the need for trying to do this. However, I am still very curious how to do this. I turned off all positioning except the image (which floats left) and made the button inline-block so it retains the text’s width. It worked for some reason–though I am sure I tried this already! Oh well. Thanks for your help!

Simple is usually the best :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.