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: https://plushdesign.net/plush8/concert/deck-the-hall/
(*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: http://spiderman.ephronsystems.com/concerts-custom-post-type-archive/
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: http://spiderman.ephronsystems.com/stackingfloats.html
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?
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!
