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

Question

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?

Answer 1

Could you post the relevant HTML and CSS you are using now?

Answer 2

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.

Answer 3

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