Управление дочерним устройством Div Позиционирование

Question

У меня возникли проблемы с поиском решения моей проблемы.

Я работаю в нижнем колонтитуле страницы. Слева направо в одной строке, есть divlaimer div, затем родительский div, содержащий FaceBook и кнопку Twitter.

(синий ~ отказ от ответственности ДИВ, розовый ~ родительского DIV, красный цвет ~ баттона Твиттера, кнопка facebook не имеет отдельный цвета).
Цель состоит в том, чтобы кнопка Twitter всегда была справа от кнопки FaceBook.

Запрет div установлен минимальным (страница использует Twitter Bootstrap), поэтому, когда размер изображения достаточно мал, родительский div кнопок перемещается на следующую строку ниже div div.
Проблема, с которой я сталкиваюсь, заключается в том, что когда эта кнопка-родительский div перемещается вниз, кнопка Twitter вылетает из родительского div и располагается ниже кнопки FaceBook в столбце.

Код для самого нижнего колонтитула:

<div class="container"> 
    <div id="footer" class="row"> 
    <div class="span9 footer-leftspan"> 
     <xsl:copy-of select="data/footer-content/entry/content" /> 
    </div> 

    <div class="row"> 
     <div class="span3 social-media-footer"> 
     <div id='face' class="span1"> 

     <!-- FaceBook Button --> 
      <a class="button-link" href="http://www.facebook.com/pages/...." target="_blank"> 
     <img id="fb-btn" class="social-img" src="/f.svg" alt="...." /> 
     </a> 

    </div> 

     <!-- Twitter Button --> 
    <div id='twitt' class="span1"> 
     <a class="button-link" href="https://twitter.com/...." target="_blank"> 
     <img id="twitt-btn" class="social-img" src="/t.svg" alt="...." /> 
     </a> 
    </div> 

     </div> 
    </div> 

    </div> 
</div> 

Помимо произвольной окраски, не существует каких-либо конкретных правил CSS на кнопках или родительским дел.
Я действительно понятия не имею об этом, и единственные, казалось бы, жизнеспособные решения, которые я могу найти, включают положение кнопок с абсолютным или фиксированным, ни один из которых не удерживает их в своем родителе в нижнем колонтитуле, как мне хотелось бы.
Моя основная цель, которую я хочу выполнить, - это просто заставить кнопку Twitter оставаться в родительском div при изменении размера.
Любые идеи? И спасибо заранее!

Answer 1

Смотрите, если это будет работать для вас: http://jsfiddle.net/panchroma/yX4ZV/

Я отредактировал HTML немного, так что в твиттере и фейсбук иконка в тот же период, а не отдельные пролетов в вложенной сетке. При этом решался вопрос о размерах окон для рабочего стола и смартфона, но не для планшетов.

Чтобы решить для таблеток я завернуты две иконки в классе, который я силы, чтобы иметь мин-ширина:

HTML

<div class="container"> 
<div id="footer" class="row"> 
<div class="span9 footer-leftspan"> 
    <xsl:copy-of select="data/footer-content/entry/content" /> 
</div> <!-- close span9 --> 

    <div class="span3 social-media-footer"> 


<div class="social-wrapper"> 
    <!-- FaceBook Button --> 
     <a class="button-link" href="http://www.facebook.com/pages/...." target="_blank"> 
    <img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." /> 
    </a> 

    <!-- Twitter Button --> 

    <a class="button-link" href="https://twitter.com/...." target="_blank"> 
    <img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." /> 
    </a> 
</div><!-- close social-wrapper --> 


    </div> <!-- close span3 --> 
</div> <!-- close row --> 


</div><!-- close container --> 

CSS

.social-wrapper{ 
min-width:185px !important; /* adjust as necessary depending on icon sizes */ 
} 

Удачи!