Firefox не ставит мои divs бок о бок

Question

У меня проблемы с тем, чтобы мой сайт выглядел хорошо в Firefox. У меня есть div, а затем два div внутри первого, и я хочу, чтобы два, которые внутри двух, были бок о бок. Это HTML:

<div class="gluggi3"> 
    <h2 class="aust">Veðurspá</h2> 
    <div class="vedurspa">Some content</div> 
    <div id="map-canvas">More content</div> 
</div> 

, а затем в CSS:

.gluggi3{ 
    background-color: rgba(0,0,0,0.5); 
    padding: 10px; 
    margin: 10px; 
    border: solid; 
    border-color: magenta; 
    border-radius: 10px; 
    width: 100%; 
} 

.vedurspa { 
    display: block; 
    width: 50%; 
    float: left; 
    padding-right: 50px; 
} 

#map-canvas { 
    height: 300px; 
    width: 300px; 
    margin: 0px; 
    padding: 0px; 
    display: block; 
} 

Этот код прекрасно работает в Chrome, но не в Firefox, в Firefox в DIV с классом 'vedurspa' dissappears. Я пробовал использовать встроенный, встроенный блок и инициализацию слева, как это было предложено в других вопросах, но все равно не повезло. Может ли кто-нибудь сказать мне, как я могу заставить их оставаться бок о бок в Firefox? Заранее спасибо!

Answer 1

у вас есть padding-right: 50px; на .vedurspa, для этого они не бок о бок, убрав, что позволит решить вашу проблему

Answer 2

Это не вопрос FireFox. Когда видовое окно будет узким, # map-canvas начнет обертывание.

Рассмотрим это:

.gluggi3{ 
    background-color: rgba(0,0,0,0.5); 
    padding: 10px; 
    margin: 10px; 
    border-color: magenta; 
    border-radius: 10px; 
    width: 100%; 
} 

.vedurspa { 
    width: 50%; 
    padding-right: 50px; 
     float: left; 
} 

#map-canvas { 
    height: 300px; 
    width: 100px; 
    margin: 0px; 
    padding: 0px; 
     float: left; 
} 

Fiddle: http://jsfiddle.net/vUvhq/

Кроме того, удалить запятую в первом классе .gluggi3

.gluggi3,{} 

в

.gluggi3{} 

Answer 3

Я если вы добавите ed padding-right на .verdurspa, чтобы между блоками было место.

Попробуйте добавить float: right; на # карта-холст