Formwrapper DIV floating out of place

I have this website ministryofcleaning.com.au when opened in desktop view, the div with class=form-wrapper with the contact form is floating up overlapping with the banner image, while it should be under that.
It used to work before, so likely a small change can fix it. Need help with that.

I’m not seeing that in chrome as the yellow form is under the banner but the right column image is overlapping the form instead.

I don’t know why you have floated the form-wrapper anyway as that just causes problems so remove the float and the right image will drop below the yellow form. (The image isn’t maintaining its aspect ratio either and is getting squashed).

You seem to have a number of other problems but first I suggest you run the code through the validator as there is a lot it doesn’t like in there. :slight_smile:

I also note that you are using bootstrap but you are not following the bootstrap structure. In bootstrap you start with a container that has 15px horizontal padding and then you nest an element with a class of row that has negative margins to offset the padding. Then you start your column classes. You cannot start column classes unless they are contained in a row which is itself in a parent container. Please refer to the bootstrap documentation and check you understand this concept before moving on.

If you start messing with the padding or margins on the container the rows or the columns then you break the bootstrap grid structure. This is probably why you have a permanent horizontal scrollbar which is a big no no. However it is not worth debugging until the errors in the html are fixed and the structure is sound. :slight_smile:

2 Likes