Pair of divs wrapping on Firefox - html

Question

I'm creating a box containing some image links, and currently I've got something that looks great on Chrome and Safari, but wraps at Firefox's default zoom level. Zooming in makes the box look fine, but at the normal zoom level they're wrapped. Here's what it looks like normally, on Chrome:
...and this is how it looks on Firefox:
The strange thing about this is that the right box isn't completely wrapped: some of the top and bottom borders are visible on the first line and I can't make sense of why it is wrapped at this particular point. This is what the HTML looks like:
<div class="clearfix buyTrackContainer">
<div class="buyTrackBox">
<p>Buy this Track</p>
<div class="buyLinksBox">
<div class="buyLinksBoxLeft">
<div class="d-itunes"></div>
</div>
<div class="buyLinksBoxRight">
<div class="d-amazon"></div>
</div>
</div>
</div>
<div class="buyTrackBox">
<p>Buy on Vinyl/CD</p>
<div class="buyLinksBox">
<div class="buyLinksBoxLeft">
<div class="b-ebay"></div>
</div>
<div class="buyLinksBoxRight">
<div class="b-amazon"></div>
</div>
</div>
</div>
...and the relevant CSS is as follows:
.buyTrackContainer {
text-align: center;
}
.buyTrackBox {
display:inline-block;
border:1px solid #ddd;
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 5px;
width:46%;
text-align:left;
background-color: #fff;
border-radius: 3px;
border-bottom:3px solid #ddd;
}
.buyLinksBoxLeft {
display:inline;
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
border-radius: 3px 0px 0px 3px;
padding: 12px 4px 8px 8px;
text-align:center;
vertical-align:center;
background-color:#fff;
}
.buyLinksBoxRight {
display:inline;
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
border-radius: 0px 3px 3px 0px;
border-left:0px;
padding: 12px 8px 8px 4px;
text-align:center;
vertical-align:center;
background-color:#fff;
}
.buyLinksBox {
display:block;
text-align:center;
padding-bottom:10px;
padding-top:8px;
}
div.d-itunes {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/iTunes-buy-button.png) no-repeat;
}
div.d-amazon {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/Amazon-buy-button.png) no-repeat;
}
div.b-ebay {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/eBay-buy-button.png) no-repeat;
}
I'm relatively new to proper CSS design so I'd appreciate any pointers about how I could improve my coding style. Does anyone know what might be happening here that could cause this?

Answer 1

Ill try with the first container change the add the following to
.buyTrackBox {
white-space:nowrap
}
.buyLinksBoxLeft {
float:left;
}
.buyLinksBoxRight {
float:right;
}
More over try dividing the width of buyLinksBoxLeft and buyLinksBoxRight in percentages so as to fit th parent container some thing around 40% may do. do the same with the buyLinksBox div and children

Answer 2

on your class, 'buyLinksBoxLeft' & 'buyLinksBoxRight' change
display: inline;
to
display: inline-block;
fiddle: http://jsfiddle.net/aqAVy/
That should sort it out.

Answer 3

Avoid redundancy in names... eg. change .BuyLinksBoxRight (son of .BuyLinksBox) to just .right (same with .left)
When multiple items has a lot of common properties, group them in a common selector.
Use oneliner paddings and borders when you can.
Code will be more readable and problems will vanish.
Running Demo
.buyTrackContainer {
text-align : center;
}
.buyTrackContainer > div,
.buyLinksBox > div {
display : inline-block;
border : 1px solid #ddd;
}
.buyTrackBox {
background-color : #fff;
border-bottom : 3px solid #ddd;
border-radius : 3px;
text-align : left;
padding : 1px 3px 5px 3px;
width : 134px;
}
.buyLinksBox {
padding-bottom : 10px;
padding-top : 8px;
text-align : center;
}
.buyLinksBox > div {
background-color : #fff;
vertical-align : center;
border-bottom : 3px solid #ddd;
text-align : center;
}
.buyLinksBox > .left {
border-radius : 3px 0px 0px 3px;
padding : 12px 4px 8px 8px;
}
.buyLinksBox > .right {
border-radius : 0px 3px 3px 0px;
border-left : 0px;
padding : 12px 8px 8px 4px;
}
.buyLinksBox > div > a > div {
margin-left : 0px;
height : 17px;
width : 50px;
}
div.d-amazon, div.b-amazon {
background : url(/images/misc/Amazon-buy-button.png) no-repeat;
}
div.d-itunes {
background : url(/images/misc/iTunes-buy-button.png) no-repeat;
}
div.b-ebay {
background : url(/images/misc/eBay-buy-button.png) no-repeat;
}