Centering Floating Divs With Max-Width

[mboehler3]

I'm trying to center a row of three floating divs, each with a max-width set. You can see the page here: http://acq.matthewboehler.com/test.php Everything on the page is centered within the <stage> div, but for the grid of images. Those are left aligned. I've tried text-align:center; margin-left:auto; margin-right:auto, and none of those worked. I even tried putting the grid into an unordered list, but that didn't work either. Is this possible?

[dsonesuk]

Same principle to centre floated horizontal menu, should work.

 .stage {	margin-left: 5%;	margin-right: 5%;	max-width: 100%;	overflow: hidden; /*added by dsonesuk*/}  .container {position:relative;float:left;left:50%;} .container .left, .container .center, .container .right {position: relative;right:50%;}

[mboehler3]

Thank you, can you help me understand why the top navigation is not centered? I have text-align:center in the CSS.

[dsonesuk]

Same reason text-align: center; margin: 0 auto; won't work for the images, Float left is being used! try adding

<div class="navigation"> <div class="navigation_center"><!-- add this --> rest of menu  </div><!--end of navigation center --></div><!--end of navigation -->

and use same styling as used before for images

.navigation {position:relative;float:left;left:50%;} .navigation_center {position: relative;right:50%;}

[mboehler3]

Ok thank you for that, I get it now. I noticed, though that when I put in the navigation CSS, it caused my dropdown menus to drop very slowly. When I removed position:relative from the CSS, the menu speed was fine. I'm confused why position:relative is causing the menu to drop down slow- any idea?

[dsonesuk]

your JavaScript code for menu slide down is throwing up errors and shows css issues relating to IE filter every time the menu is hovered over, I suggest using jquery it shorter and no errors. remove mouseover/mouseout and use below

$(document).ready(function(){$('.dropdown dd').each( function(){$(this).attr("rel", parseInt($(this).innerHeight()));});$('.dropdown').hover(function () {var dd_menuheight=$(this).children("dd").attr("rel")+"px";$(this).children("dd").stop().css("height", "0").show().animate({height: dd_menuheight, opacity: "1"}, "slow");},function () {$(this).children("dd").stop().animate({height: "0px", opacity: "0.6"}, "slow");});});

with

  .dropdown {	float: left;	padding: 20px 5px 0 0;	vertical-align: middle;	position:relative;}.dropdown dd {	background: none repeat scroll 0 0 #FFFFFF;	display: none;	top: 70px;	opacity: 0.6;	overflow: hidden;	position: absolute;	width: 141px;	z-index: 200;}

EDIT: made adjustments to calculate height of DD element, as these will vary as links are added, also adjusted the stop() of the animation, as it was preventing fading from working correctly.

[mboehler3]

Thank you very much, that works like it should. I appreciate you pointing out the errors.

[mboehler3]

I've been having an issue in IE with the design of this page so I am re-tracing my steps to try and figure out the issue. I removed the rollover effect from the images, and when I did that it moved the position of my stage off-center. You can see this here: http://acq.matthewboehler.com/nofade.php, compared to what it looks like when its centered: http://acq.matthewboehler.com/ All I did was remove the class="fade" and background image. I'm confused how this changed the position, can someone help explain to me?