2 divs in one row in Safari [error] - html

Question

I'm a having a little problem trying to put 2 divs in one line in Safari. It's just an HTML for a test (http://www.despegarboido.byethost22.com/) The problem is that when I open it on Safari, all of my rows collapse into the same column.
My html looks something like this:
<div class="row">
<div class="leftColumn"></div>
<div class="rightColumn"></div>
</div>
.row {
display: flex;
width: auto;
}
.leftColumn {
border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #ffff33;
width: 60%;
height: 330px;
margin: 5px 20px;
margin-right: 5px;
float: left;
}
.rightColumn {
border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #8cb6dd;
background: url(images/playa1.jpg);
background-repeat: no-repeat;
width: 40%;
height: 330px;
margin: 5px 20px;
margin-left: 5px;
float: left;
}
Those divs should be one next to the other, It works on every other browser, and I cant find a way to make it work on Safari.

Answer 1

You should reduce the width of your divs. The width of leftColumn is 60% and the width of the rightColumn is 40%. Your logic is correct, but you have not taken the margins into account. For example, you applied the following margin: 5px 5px 5px 20px to the div with the class name leftColumn. So, the total space leftColumn is occupying will be equal to 60% of the page + 25px. I am adding 25px to the total space because the right margin is equal to 5px and the left margin is equal to 20px.
Because you have not accounted for the margins when assigning the width to leftColumn and rightColumn your rightColumn is being pushed to the next line due to less space on the previous line.

Answer 2

Try to make them inline from the CSS as below,
Create a class say myDiv and within your CSS add below line,
.myDiv{
display: inline;
}
<div class="row">
<div class="leftColumn myDiv"></div>
<div class="rightColumn myDiv"></div>
</div>
Here is an example

Answer 3

Use the following code (recently updated):
<div class="row">
<div class="column" id="left">
<div class="inner" id="leftinner"></div>
</div>
<div class="column" id="right">
<div class="inner" id="rightinner"></div>
</div>
</div>
body {
margin: 0px; padding: 0px
}
.row {
display: flex;
width: auto;
}
.column {
padding: 5px 20px;
float: left;
}
.inner {
border-radius: 10px;
-webkit-border-radius: 10px;
height: 330px;
}
#leftinner {
background-color: #ffff33;
}
#left {
width: 60%;
padding-right: 5px;
}
#rightinner {
background-color: #8cb6dd;
background: url(images/playa1.jpg);
background-repeat: no-repeat;
}
#right {
width: 40%;
padding-left: 5px;
}
This version avoids repeating style definitions unnecessarily and also fixes the width problem. See it in action: http://cssdeck.com/labs/khpx1e8y