www.webdeveloper.com
Results 1 to 4 of 4

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

Hybrid View

  1. #1
    Join Date
    Oct 2009
    Posts
    69

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

    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

    Code:
    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?

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    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?

  3. #3
    Join Date
    Oct 2009
    Posts
    69
    No, it does exactly the same thing with inline block.

  4. #4
    Join Date
    Oct 2009
    Posts
    69
    I found a solution afterwords combining javascript and css.

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

    Code:
    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

    Code:
    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]
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles