Is this the best way to center two items side by side with no container?

HTML & CSS
1

I’m trying to get away without having to wrap my centered stuff in the head in another container. Is this the cleanest way? Or did I forget another better way? Bear with me until my rusty brain gets spinning again.

#div_1
{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 50%;
margin-left: -200px;
float: left;
clear: none;
}

#div_2
{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
right: 50%;
margin-right: -200px;
float: right;
clear: none;
}

2

This works. The container is only needed if you need to , well contain something else … background, extra content, etc
Maybe you have already considered this, since you are asking how to center w/o a container, but all elements are contained in ‘something’ … even if it is the BODY tag… so maybe you could do :

#div_1
{
    width: 200px;
    height: 200px;
    background-color: red;
   
  }

#div_2
{
    width: 200px;
    height: 200px;
    background-color: blue;
  }

div {
    display:inline-block;
    vertical-align:middle;
    
}
body { text-align:center;}
body>div {text-align:left;}

hope that helps

3

Cool that’s prob a little cleaner. Lol I have forgot all. It will come back quick as I’ve done it before. But slow going at this point. Thanks bro!

4

Unless I muffed it the inline block way drops down to the next row when the window is reduced. min width on the container seemed to have no effect. Although I don’t know why. I just went with PR way and it worked perfect

5

Probably not, you have to remember that when you display something inline it also displays the whitespace in between.
so your ‘min-width’ might need to count for that, OR you could give the second element a negative margin-left to offset the.3em of space …OR simply comment out/eliminate the space between elements.

for example … set the body’s min-width to 410px instead of 400px, (or margin-left:-.3em on #div_2) and it should do.

6

it was at 4 am maybe my brain wasn’t on yet. maybe I did not account for the white space. What I did notice though was in safari at least those two elements did not stay centered smoothly when the window was reduced. Shook pretty bad. The relative way was smooth. But I will still check to see what was up with the dropping…