I've encountered an issue with aligning divs side by side in Firefox and Safari, although it seems to be working perfectly in Chrome. It's a bit tricky to provide all the CSS code as I have different stylesheets for mobile, normal, and print versions - the problem lies within the print stylesheet. If you require more information to help me troubleshoot this problem, please do let me know.
You can visit my website at for further details.
Here is an image of how the page looks on Chrome:
And here is an image of how the page appears on Firefox:
The HTML structure I'm using is as follows:
<div class="page">
<div class="content">
<div class="left-content"></div>
<div class="right-content"></div>
</div>
</div>As for the CSS:
.page {
clear:both;
background-image: none;
background-color:none;
margin: 50px auto;
margin-left:30px;
border:0;
outline:none;
}
.content {
clear: both;
margin: 0px auto;
width: 1000px;
background: #ccc;
position: relative;
border:0;
outline:0;
-webkit-box-shadow:none;
-webkit-box-shadow:none;
}
.left-content{
width:450px;
text-align:left;
}
.right-content{
width:450px;
position:absolute;
margin-top:0px;
padding-top:0px;
margin:0px;
}