Positioning buttons on a simple webpage using CSS - html

Question

I'm trying to get my head around layout using CSS. As usual there seems to be more than one way to do things, but I have come up with a way of positioning things on my test webpage which works as I'd like, apart from getting some buttons in the correct place!
If you'll excuse my crude Paint layout diagram below, could you please look at how I've arranged the different parts, and then advise on how to position the buttons where they are shown?
The whole blue section is a wrapper to keep everything in, and has a
min and max width.
Nav bar - Just displayed as a block.
The main image is just max-width 100%, and the quote is positioned
inside this using absolute positioning relative to this image (so it
moves with the image)
Description 1 and 2 are floated left, both with a determined width
and margin (as a percentage) so they dont overlap and they dont
exceed the width of the screen.
My issue is with the buttons, shown in red. How can I get these where they are shown? If I float them as per the two descriptions, the buttons appear too low down (ie below the second description as this is further down the page).
I've tried an absolute position, but this seems a bit clunky as the only container I can refer it to is the entire wrapper, and it also seems a bit 'trial and error'y to get the position exactly right. Can I do an absolute position relative to the first description maybe? All suggestions/solutions welcome!
** Additional information **
Screenshot of the webpage layout after replicating the answer given:
Below is the 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>
And below is the CSS:
.ib50 {
display: inline-block;
width: 50%;
}

Answer 1

4/Description 1 and 2 are floated left, both with a determined width and margin (as a percentage) so they dont overlap and they dont exceed the width of the screen.
This is a very wrong way to go about it. Instead, try something like this:
<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>
Now apply this CSS:
.ib50 {
display:inline-block;
width:50%;
}
You should be able to figure out the rest from here :)