Home/ Questions/Q 6638955
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:29:52+00:00

I have this simple html, with styling: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

  • 0

I have this simple html, with styling:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#buttons { width:300px; max-width:300px; border-width:1px; white-space:normal;  border-style:solid; }
#buttons span { cursor:default; padding:10px; white-space: nowrap; }
</style>
</head>

<body>

<nav id="buttons">
    <span>Some Button</span><span>Button</span><span>A longer button</span><span>Another button</span><span>Click me first</span><span>Button</span></nav>

</body>
</html>

The main block element (#buttons) should be fixed in width, but the containing span elements are dynamically generated, and have variable lengths. I want these ‘span’ elements to wrap and stay inside the block, no matter how many they are. So basically the main block element should expand vertically if needed.

Right now, they expand horizontally, overflowing the main container.

For some strange reason, if I put white spaces between the inline ‘span’ elements, it works. But I can’t do that on production (they are attached to the DOM by a javascript library).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I added the bits in bold to your css:

    #buttons { width:300px; max-width:300px; border-width:1px; white-space:normal;  border-style:solid; **overflow: auto;** }
#buttons span { **float: left;** cursor:default; padding:10px; white-space: nowrap; }

    Can see in action at http://jsfiddle.net/S9rz8/

    Think this is what you want?

    • 0