How to properly float two columns side by side with css

Question

This is one of those things I learned a long time ago and never thought much about if I was actually doing it the right way.

Let\'s say we have a structure

Answer 1

use display:flex for two div floats side-by-side

#wrapper {
    width: 600px;
    display: flex;
}
#sideBar {
    display: inline-flex;
    width: 25%;
}
#mainContent {
    width: 75%;
    flex: 1;
}