Jump to content
mboehler3

Centering Floating Divs With Max-Width

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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%;}

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

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%;}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...