Differences between Chrome and Firefox wrapping a column div
I have a layout defined through CSS that has three columns. It displays correctly through Chrome, but in Firefox, the third (right) column wraps around to the bottom. Am I defining the layout incorrectly?
<style type="text/css">
.content {
position: relative;
border-top-width: 1px;
width: 100%;
min-width: 960px;
margin开发者_StackOverflow-top: -1px;
}
.content-container {
border: 0;
position: relative;
width: 960px;
border-radius: 0 0 0 0;
margin: auto;
}
.left-menu-container {
width: 188px;
padding: 0 20px 0 0;
border: 0;
box-sizing: border-box;
vertical-align: top;
position: relative;
display: inline-block;
}
.center-content-container {
vertical-align: top;
display: inline-block;
min-height: 900px;
width: 500px;
border-left: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
height: 100%;
position: relative;
padding: 15px 0 0 0;
}
.center-content-subcontainer {
padding: 0 0 0 5px;
}
.right-menu-container {
vertical-align: top;
display: inline-block;
width: 260px;
border: solid;
position: relative;
}
.right-menu-subcontainer {
margin: 16px 0 0 0;
}
#slideshow {
position:relative;
height:250px;
width: 250px;
overflow: hidden;
background-color: #ffffff;
}
</style>
How can I get this to display correctly across browsers?
<body>
<div class="content">
<div class="content-container">
<div class="left-menu-container"></div>
<div class="center-content-container">
<div class="center-content-subcontainer"></div>
</div>
<div class="right-menu-container">
<div class="right-menu-subcontainer">
<div id="slideshow" align="center">
<img src="" alt="Slideshow" title="Slideshow" width="250" height="100">
</div>
</div>
</div>
</div>
</div>
</body>
In FF 5.x the box widths are this:
Left: 188 + 20 (width+ padding)
Center: 500 + 1 + 1 (width + L & R borders)
Right: 260 + 3 + 3 (width + L & R borders)
Total: 976
Firebug's Layout Inspector is your friend here.
I think the problem is with this line of CSS:
box-sizing: border-box;
What version of Firefox are you using? Because even as late as version 4 (possibly later, I'm not sure), Firefox only supports -moz-box-sizing. And if Firefox isn't changing its box-sizing, then that means it thinks you're trying to stick 968px worth of content into 960px worth of space.
Try this on your left-container:
.left-menu-container {
width: 188px;
padding: 0 20px 0 0;
border: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
position: relative;
display: inline-block;
}
Probably worth a read: https://developer.mozilla.org/en/CSS/box-sizing
加载中,请稍侯......
精彩评论