How to properly layout my content

[nsharony]

Hello.
I am new to CSS and trying to learn about the proper way to use divs along with the float style attribute.
My initial goal is to have two panels on the same horizontal line.
On the right I should have a panel that is 100px width and the rest of the layout (to its left) should be occupied by another panel.

See the following at: http://codepen.io/anon/pen/qRrmag

Instead of having the panels display one next to the other, the top_buttons one is displayed on its own in a new line.
If I remove the width: 100%; attribute for the #top_panel rule, then the panels DO get displayed on the same line, but #top_panel now has a width of zero.

Any tips on how to resolve this?
Thanks in advance.

[Shikkediel]

You could give this a try:

#top_panel {
  height: 48px;
  overflow: auto;
}

#top_buttons {
  width: 110px;
  height: 48px;
  float: right;
}

[Author]

Posts