Кнопки позиционирования на простой веб-странице с использованием CSS

Question

Я пытаюсь развернуть свою мачту с помощью CSS. Как обычно, похоже, есть несколько способов сделать что-то, но я придумал способ позиционирования вещей на моей тестовой веб-странице, которая работает так, как мне хотелось бы, помимо того, что некоторые кнопки будут в правильном месте!

Если вы извините мою грубую схему раскладки краски ниже, не могли бы вы посмотреть, как я устроил разные части, а затем посоветуйте, как расположить кнопки, где они отображаются?

1. Весь синий разделе является оболочкой, чтобы держать все в, и имеет мин и максимальную ширину.

2. Nav bar - отображается только как блок.

3. Основное изображение просто макс-ширина 100%, а котировки позиционируется внутри этого с помощью абсолютного позиционирования относительно этого образа (так движется с изображением)

4. Описание 1 и 2 плавающие слева, оба с определенной шириной и маржа (в процентах), поэтому они не перекрываются, и они не превышают ширину экрана.

Моя проблема с кнопками, показанными красным цветом. Как я могу получить их там, где они показаны? Если я поплаваю их в соответствии с двумя описаниями, кнопки будут казаться слишком низкими (т.е. ниже второго описания, так как это дальше по странице). Я пробовал абсолютную позицию, но это кажется немного неуклюжим, поскольку единственным контейнером, на который я могу ссылаться, является вся оболочка, и также кажется, что «пробная версия и ошибка» позволяют получить правильную позицию. Могу ли я сделать абсолютное положение относительно первого описания? Все предложения/решения приветствуются!

** Дополнительная информация **

Скриншот макета веб-страницы после того, как тиражирование ответ дал:

Ниже HTML:

<div class="ib50"> 
    <div id="desc1"> 
    <h2>Welcome to Toms Properties</h2> 
    <p>There is a second leg to come at Old Trafford - on Wednesday 22 January - but who will the winners of tonight's tie face at Wembley?It will be Manchester City or West Ham, with the first leg of that one taking place at the Etihad tomorrow night.</p> 
    <p>Are we anticipating a Manchester derby final?</p> 
    </div> 
<div id="buttons"><button>Ohai there!</button></div> 

</div><div class="ib50"> 
    <div id="desc2"> 
    <h2>Site Navigation Tips</h2> 
    <p><strong>Charles in Golders Green, via text: </strong>I'm very much a Moyes supporter, but what I can't understand are his claims that we deserved to win or get something out of the Swansea and, to a lesser extent, the Spurs game. Regardless of new signings, now is the time Moyes must earn his money by rallying the side. Two results before Chelsea away in a fortnight are a must. </p> 
    </div> 
</div> 

А ниже это CSS:

.ib50 { 
    display: inline-block; 
    width: 50%; 
} 

Answer 1

4/Описание 1 и 2 перемещаются влево, как с определенной шириной, так и по краю (в процентах), поэтому они не перекрываются, и они не превышают ширину экрана.

Это очень неправильный путь.Вместо этого, попробовать что-то вроде этого:

<div class="ib50"> 
    <div>Description 1</div> 
    <div id="buttons"><button>Ohai there!</button></div> 
</div><div class="ib50"> 
    <!-- Note that it is important to have no space between tags there --> 
    <div>Description 2</div> 
</div> 

Теперь примените этот CSS:

.ib50 { 
    display:inline-block; 
    width:50%; 
} 

Вы должны быть в состоянии выяснить, остальное здесь :)