My HTML "toolbar" has multiple widgets displayed in a horizontal layout. Each widget is represented by a div element in the source code:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
To position these divs, I use float: left. However, I want them to stay fixed to the top of the toolbar without wrapping if the window width is reduced. Instead, I want them to overflow horizontally (with hidden overflow) to mimic a real toolbar's behavior.
In essence, I need something similar to position: fixed but only for the vertical axis. Horizontally, they should be arranged one after another in a row. Is there a CSS solution for this?
Update: Below is the actual HTML content. The div elements with class="row" are the widgets meant to appear in the toolbar, positioned in a single row horizontally.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>