I am encountering some rendering issues specifically in Firefox and Safari.
Currently, my flex column boxes are set at 33% each and are supposed to display horizontally across the screen. However, this works correctly in IE and Chrome but not in Firefox and Safari, where the content appears vertically down the page in a single column.
What modifications should I make in my CSS to ensure proper rendering in Firefox and Safari?
Jsfiddle: http://jsfiddle.net/huskydawgs/4rj47uvn/10/
Below is the HTML code:
<div class="container-3col">
<div class="box-3col-1">
<img alt="Banana" height="173" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYVRpzJ_BgMuSti8xSqtLjWQoQ3Y4unc7fc5XCsh6jMw3kQchLCnBs3oU" width="173" />
<p>
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p></div>
<div class="box-3col-2">
<img alt="Apple" height="173" src="http://dreamatico.com/data_images/apple/apple-6.jpg" width="173" />
<p>
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
</div>
<div class="box-3col-3">
<img alt="Orange" height="173" src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="173" />
<p>
The orange tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
</div>
</div>
And here is the CSS:
.container-3col {
display: flex;
justify-content: center;
}
.container-3col > div {
margin: 10px;
padding: 10px;
text-align: center;
}
.box-3col-1 {
width: 33.33333%;
}
.box-3col-2 {
width: 33.33333%;
}
.box-3col-3 {
width: 33.33333%;
}