CODEWITHSUNDEEP
csshtmlword-wrap
Dan
Dan

Reputation: 71

Elements not wrapping inside fixed-width div

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).

Upvotes: 2

Views: 9435

Answers (3)

BNL
BNL

Reputation: 7133

This answer is if you want more than one item per line.

If you add float: left; to the style of the spans, they wrap. Add position: absolute; to #buttons to make the container have height.

http://jsfiddle.net/TNmrZ/1/

Upvotes: 2

Bantros
Bantros

Reputation: 295

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?

Upvotes: 3

Simon Arnold
Simon Arnold

Reputation: 16177

I think both of your element are considered inline.
Make them display:block and it should work fine.

Upvotes: 1

Related Questions