I have successfully placed two divs side by side using the following markup, as shown in image 1, but this layout only works on Chrome. However, Firefox renders it differently as seen in Image 2. Is this a known issue that I overlooked? How can I resolve this?
<div style="background-color: #ffcc33;">
<div class="entry-content" style="float: left;">
<h3>Full Article: <a href = "<?php the_field('url'); ?> "target="_blank">Link</a></h3>
<div id="summary_headline">
<h3>Summary</h3>
</div>
<?php
the_field('generated_summary');
wp_link_pages( array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'inbox' ),
'after' => '</div>',
) );
?>
<p class="read-more"><a href="<?php the_permalink(); ?>" target="_blank" class="button"><?php echo esc_html('Read More', 'inbox'); ?></a></p>
</div>
<div style="float: left; background-color: #eee;">
<div id="wordmap_display" style="background-color: #a0a0a0;" >
<h3>Word Map</h3>
<div id="wordmap_chart"></div>
</div>
<div id="sa_results_display" style="background-color: #f5baff;">
<h3>Sentiment Analysis Results</h3>
<canvas id="sa_chart"></canvas>
</div>
<div style="clear: both;"></div>
</div>
</div>
CSS
.page .post-content .entry-content, .single-post .post-content .entry-content {
height: auto;
overflow: hidden;
background: #42ffec;
width: 60%;
}
.post-content .entry-content {
height: 60vh;
overflow: hidden;
position: relative;
text-align: justify;
}
div {
display: block;
}
EDIT: I found a solution. By setting the outermost div to overflow: hidden and removing float:left from the second inner div while adding overflow:hidden, I was able to make it work.