[RESOLVED] getting my display: block; float: left links to wrap properly

[bonecone]

I am developing a PHP application for building and managing taxonomies. It has the general look of Windows Explorer (a tree on the left and a content pane on the right). The content pane will display subcategories in the same way as Tile View in Windows Explorer, so that the categories will be arranged in as many columns as the screen width will allow.

The subcategoeies are displayed as hyperlinks with the following css properties applied to them

a.subcategory_link {
     float: left;
     display: block;
     width: 80px;
     min-width: 80px;
     margin: 5px;
     padding: 3px;
}

With these style elements in place, the subcategories will wrap like so:

Screenshot from 2012-10-08 10:43:36.jpg

But if one of the subcategories has an unusually long name, it will take up multiple rows, and the subcategories that come after it will wrap multiple times like this:

rowspan.jpg

I want to force my hyperlinks to wrap to the next line entirely, regardless of the height of the preceding hyperlinks. I don't want to set a specific height and then clip the category names with the overflow: hide property (which is basically how Windows Explorer does things). How do I accomplish this with CSS?

[auntnini]

See for example http://www.w3schools.com/cssref/pr_class_display.asp

block The element is displayed as a block element (like paragraphs and headers). A block element has some whitespace above and below it and does not tolerate any HTML elements next to it
inline This is default. The element is displayed as an inline element (like span). An inline element has no line break before or after it, and it tolerates HTML elements next to it
inline-block The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element

Would display: inline-block work for you?

[bonecone]

No, it does exactly the same thing with inline block.

[bonecone]

I found a solution afterwords combining javascript and css.

I used the following code the the window.onresize event :

window.onresize = function(event) {
	var rightPaneDivs = document.getElementById("rightPane").getElementsByTagName("div");

	// loop through the divs to the one containing the category links

	for(i=0; i < rightPaneDivs.length; i++)
	{

		// once the appropriate div has been found

		if(rightPaneDivs[i].className == 'content_pane_contents')
		{
			var categoryLinks = rightPaneDivs[i].getElementsByTagName('a');

			// make sure there are currently some category links resent

			if(categoryLinks.length > 0)
			{

				/* determine the width of the div, the width of the category links inside it,
				   use integer division to get the number of columns that can fit inside,
				   use this number while looping through the category links to determine
				   which ones need to have the clear attribute set to "left" in order to
				   force it onto a new line */

				var contentPaneOffsetWidth = parseInt(rightPaneDivs[i].offsetWidth) - parseInt(getStyle(rightPaneDivs[i], 'paddingLeft').replace(/[^0-9]+/g, ''));
				var columnsWidth = parseInt(categoryLinks[0].offsetWidth) + parseInt(getStyle(categoryLinks[0], 'marginLeft').replace(/[^0-9]+/g, '') * 2);
				var totalColumns = Math.floor(contentPaneOffsetWidth / columnsWidth);

				for(j=0; j < categoryLinks.length; j++)
					categoryLinks[j].style.clear = (j % totalColumns == 0) ? 'left' : 'none';
			}
		}
	}
}

Plus I made use of this cross-browser function to retrieve css properties from an external stylesheet

function getStyle(el, cssprop) {
	if (el.currentStyle) //IE
		return el.currentStyle[cssprop]

	else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
		return document.defaultView.getComputedStyle(el, "")[cssprop]

	else //try and get inline style
		return el.style[cssprop]
}