How can I convert this table-based layout to use semantic html with css-based layout?

In the image above, most of the html is semantic, using css to manage the look of it all. Despite my best efforts, though, I had to resort to using a table to get the segment on the开发者_高级运维 right to stay where it is and allow its inner elements to wrap fluidly when it gets too big for the screen, like this:

I know that it's preferable if tables are only used for "tabular data," but I have never found a good way to force elements to do this without using tables. Has anybody solved this problem?

---

have you tried using list-items? Generally when creating menu elements, it's better to use UL->LI instead of span or div

---

You should be able to set the width of it. This is difficult to do without seeing the exact way you are doing this, because CSS is dependent on parent sizes, etc.

I would look into the CSS property min-width, too.