Float: Center (JS Fix)

[new_guy217]

So, all of us CSS junkies have tried to center floated elements within a parent container that can have a fixed or percentage width. And of course, who wants to set an absolute width on their floated elements? That’s great if you know how wide that div needs to be, but I wanted to create reusable classes that didn’t care about their width and still would stay centered, as well as float.

The JS does things like compare the width of all the floated elements to the width of the window (or parent container) to make sure the elements fit where they are suppose to. And it re-centers the elements when the user resizes their browser window.

EDIT: Tested in IE 7.0 AND FF 2.0

JAVASCRIPT CODE:

<script type="text/javascript" language="javascript">
	//I have this code-block in the actual page using the function
	//Repos the search div to the center of the page
	window.onresize = setWidth;
	
	//Initiate functions	
	function init(){
		//Pos the search div to the center of the page
		//Floated box name, container for all boxes, dynamic inner-container, center to window or parent container?
		makeCenter('searchBox', 'searchContainer', 'searchDynamicWidthBox', 'window');           
	}
	
	//Run on window resize
	function setWidth(){
		makeCenter('searchBox', 'searchContainer', 'searchDynamicWidthBox', 'window');           
	}
	
	//Causes the init funtion to load on page load 
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}
				func();
			}
		}
	}
	addLoadEvent(init);  

	
	//I have this funtion in a seperate JS functions page
	//Page center floated elements
	function makeCenter(boxName, boxContainer, boxDynamic, centerIn){        
		var aryTable = document.getElementsByTagName("div");
		var aryBoxes = [];
		var minWidth = 0;
		
		//Figure out the width of each of the floats that need to be centered
		for(var i=0; i<aryTable.length; i++){  
			if(aryTable.item(i).getAttribute( 'name' ) == boxName ){    
				minWidth = minWidth + Sys.UI.DomElement.getBounds(aryTable.item(i)).width;               
			}
		} 
		
		//Figure out the container width
		containerWidth = Sys.UI.DomElement.getBounds(document.getElementById(boxContainer)).width;
		
		//Figure out the window width
		//Should work with most browsers. IE has problems with window.innerWidth
		//Also works in different rendering modes (quirks vs strict)
		if(typeof(window.innerWidth) == 'number'){
			windowWidth = window.innerWidth;
		} else if( document.documentElement && document.documentElement.clientWidth) {
			windowWidth = document.documentElement.clientWidth;
		} else if( document.body && document.body.clientWidth){
			windowWidth = document.body.clientWidth;
		}      
				
		//Make the child dynamic width box only as wide as its parent container
		if(minWidth > containerWidth){
			minWidth = containerWidth;    
		}
							  
		//Try to center in page
		//If we can't find the window width center within parent container
		if(typeof(windowWidth) == 'number' && windowWidth > 0 && centerIn == 'window'){
			marginPos = (windowWidth - minWidth) / 2;
		} else {
			marginPos = (containerWidth - minWidth) / 2;
		}             
		
		//Set the width of the dynamic centering box
		document.getElementById(boxDynamic).style.width = minWidth + "px";
		
		//Set the margin of the dyamic centering box (centers the floated elements)
		document.getElementById(boxDynamic).style.marginLeft = marginPos  + "px";
	}
</script>

And the HTML code

<div class="centerContainer" id="searchContainer">
	<div id="searchDynamicWidthBox" class="centerDynamic" style="">
		<div class="centerFloat" name="searchBox">
			Centered content floated block 1
		</div>
		<div class="centerFloat" name="searchBox">
			Centered content floated block 2
		</div>
		<div class="centerFloat" name="searchBox">
			Centered content floated block 3
		</div>
	</div>        
</div>

And the CSS code

.centerContainer
{
	width: 100%;
	float: left;
	text-align: center;
}
.centerFloat
{
	float: left;
	padding: 5px 5px;
}
.centerDynamic
{
	float: left; 
	margin-left: -700px; 
	width: 700px; 
	border: 1px solid #CCCCCC; 
	position: relative;
}

I hope this helps someone, as I looked for a while online and couldn't find any cross-browser solutions. It's not perfect, but works for what I needed it to do, and should be able to be expanded to work for whatever. You know of a better solution? Post it! (Please)


-ng217

[sr71000]

easier way that I know of, in the css, just put

margin-left:auto;
margin-right:auto;

Haven't tested too thoroughly though...