简体   繁体   中英

HTML/CSS left and right div side by side on Chrome but not on Safari/Firefox

I am having a hard time aligning divs side by side in Firefox and Safari, however it works great in Chrome. It is hard to give all the css because I have a mobile stylesheet, a normal one, and then the print one which is the one in question. The other stylesheets work great. If more information is needed to solve this please let me know.

My website is at http://bidonmoving.com/Template1/website.php for more details

A image of the Chrome page: http://bidonmoving.com/Resify/Resumes/Template1/images/chrome.png

A image of the Firefox page: http://bidonmoving.com/Resify/Resumes/Template1/images/firefox.png

My HTML setup is basically as follows:

<div class="page">
    <div class="content">
                    <div class="left-content"></div>
                    <div class="right-content"></div>
            </div>
    </div>

And the CSS is:

.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;
}

Change your css as -

.left-content{
    width:450px;
    text-align:left;
    float:left;
 }
 .right-content{
    width:450px;
    float:right; (or float:left and some margin-left)
  }

change your CSS to this

.left-content{
    width:450px;
    display:inline-block;
vertical-align:top;
margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}
.right-content{
    width:450px;
    display:inline-block;
vertical-align:top;
    margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}

I resolved the issue by adding a top css element to .right-content, this however made Chrome's right side go down more than it should and flipped the problem from all other browsers to just Chrome being the problem. I used a css hack to make Chrome work and from what I see it works great.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM