How to center one or more divs in the middle of two left and right floated divs for all screen sizes.

The important part is that the centered div must come AFTER the left and right divs in the HTML. Then use the following:

Here are the styles:

#left
        {
            float: left;
            border: solid 1px red;
            width: 25%
        }
        #mid
        {
            margin-left: auto;
            margin-right: auto;
            border: solid 1px green;
        }
        #right
        {
            float: right;
            border: solid 1px blue;
            width: 25%;
        }

I am
left

I am
righ

middle. I dont' have a width. But I automatically stetch to fill the available space between the left and right divs, no matter what their size. I may not be centered in the page if the left and right divs are not the same size. If my text is too long or the screen too small I wrap under left and right. This could be fixed by wrapping everything in a container and then setting left and right height to 100% (of the container.) Of course, we could scrap all this and just use flexbox!!