views:

261

answers:

3

I have been looking around for solutions, and tried to implement what is often suggested, but I am not managing to horizontally center a div within another div.

With my CMS I want to show up to four info blocks towards the bottom of the page. So, I am trying to put between zero and four divs within two container divs. The four divs get a width of 19%, 33% or 49% of the available width dependent on how many divs are shown on a page. The inner container is supposed to be horizontally centered within the outer container. Thereby, the group of up to four divs should of course end up in the horizontal center. Since the inner container is the same width as the main content plus two columns above it, which are centered, it should appear in line vertically. The outer container takes the full page width and has a background image.

My code is now as follows:

<!-- BEGIN USER MODULES -->
<tr>
  <td align="left" valign="top">

 <?php if ( $this->countModules( 'user1 and user2' ) || $this->countModules( 'user1 and user3' ) || $this->countModules( 'user1 and user4' ) || $this->countModules( 'user2 and user3' ) || $this->countModules( 'user2 and user4' ) || $this->countModules( 'user3 and user4' ) ) : ?>
  <style type="text/css">#user1, #user2, #user3, #user4 { width:49%; }</style>
 <?php endif; ?>
 <?php if ( $this->countModules( 'user1 and user2 and user3' ) || $this->countModules( 'user1 and user2 and user4' ) || $this->countModules( 'user1 and user3 and user4' ) || $this->countModules( 'user2 and user3 and user4' ) ) : ?>
  <style type="text/css">#user1, #user2, #user3, #user4 { width:33%; }</style>
 <?php endif; ?>
 <?php if ( $this->countModules( 'user1 and user2 and user3 and user4' ) ) : ?>
  <style type="text/css">#user1, #user2, #user3, #user4 { width:19%; }</style>
 <?php endif; ?>

 <?php if ($this->countModules( 'user1 or user2 or user3 or user4' )) : ?><div id="wrap1234"><div id="user1234">
  <?php if($this->countModules('user1')) : ?><div id="user1" class="module_bc"><jdoc:include type="modules" name="user1" style="xhtml" /></div><?php endif; ?>
  <?php if($this->countModules('user2')) : ?><div id="user2" class="module_bc"><jdoc:include type="modules" name="user2" style="xhtml" /></div><?php endif; ?>
  <?php if($this->countModules('user3')) : ?><div id="user3" class="module_bc"><jdoc:include type="modules" name="user3" style="xhtml" /></div><?php endif; ?>
  <?php if($this->countModules('user4')) : ?><div id="user4" class="module_bc"><jdoc:include type="modules" name="user4" style="xhtml" /></div><?php endif; ?>
 </div><div class="clear"></div></div><?php endif; ?>

 </td>
</tr>

In my style sheets I have this:

#wrap1234 { background:transparent url(images/header_bg.png) no-repeat scroll 0 0; border-bottom:1px solid #444444; border-top:1px solid #444444; margin:25px 0 10px; padding:5px 0; text-align:center; align:center;}

#user1234 { width:1420px; margin-left:auto; margin-right:auto; }

#user1, #user2, #user3, #user4 { float:left; margin:5px 0; padding:5px 0; text-align:left; }

The table and body in which all this is placed are as follows, skipping everything that falls outside of the direct hierarchical line:

<body><div id="wrapper_main"><center><table border="0" cellpadding="0" cellspacing="0" width="<?php echo $this->params->get('width'); ?>" id="main_table"><tbody>

The css of the body and table is below. Using Firebug I cannot find anything in there that makes a difference when switched off.

html, body, form, fieldset{margin:0; padding:0;}
body {background:#222222 none repeat scroll 0 0; color:#777777; font-family:Helvetica,Tahoma,sans-serif; font-size:0.72em; height:100%; text-align:center;}
#wrapper_main {background:#FFFFFF url(images/wrapper_main_bg.gif) repeat-x scroll left top; border-bottom:2px solid #CCCCCC; padding-bottom:20px; position:relative; width:100%; z-index:1;}
td, div {font-size:100%;}

The actual page is available on my development site at jldev d o t joomlaloft.com.

As you can see, I have given the inner container a fixed width as well as left and right margin auto, as is often suggested as the way to center a div horizontally. However, the inner container with the divs in it ends up left aligned.

Can this be made to work? Or, should I try an alternative, for example by putting a variable margin left and right on the most left and most right info block divs?

I have seen that there are many very good answers on stackoverflow so I am hoping that someone is able to tell me where I went wrong. As it is I am out of inspiration... Many thanks in advance for any help you can give!

PS Btw this must be one of the most intuitive and practical forums I have ever seen!

A: 

The thing I have done when I wanted to center a DIV was to position it relatively. Setting the left to 50% and margin-left to 1/2 the width of the div will perfectly center the div in the container. I've used this in the past, and to my knowledge it works in most browsers (IE6+, and non-IE browsers). Though there may be a better way to do this.

#user1234 { position: relative; 
            left: 50%;
            margin-left: -710px;
            width:1420px;}
Noah Callaway
This almost worked for me, but I had to set the left margin much lower. It was not until Emily's answer that it finally became clear that the width setting was completely miscalculated. With the right width this worked, and it is a good alternative to have.
E Wierda
True. Emily's answer really gets to the core of why what you had didn't work. Glad you got something that worked!
Noah Callaway
+1  A: 

I'm not sure why are you using width:1420px for. Please follow this or this site for proper layout tutorials in css. Another option would be to use a css grid.

I personally recommend, taking the table out and switching to a fluid grid, that'll fit your site best. It has a bit of a learning curve but trust me, you'll be happier ever after. There is a lot of work done on your site; albeit the CSS could be changed for the better. CSS freenode usually gives good advice and critique if you need immediate help.

Another thing, it's not recommended to use width and margin in the same tag

dassouki
Thanks for those great links! Although the other answers are more practical as short term solutions, these lihnks are eye openers to me and fit in nicely with my plans to make a tableless website in a next phase.
E Wierda
+1  A: 

The inner centered div cannot be wider than it's containing div. In my browser your site is 1200 px wide and the #user1234 is 1420px;

Set #user1234 to width: 90%; and each user div to width: 25%; when there are 4 divs. Put overflow:hidden; on #user1234 to clear the floats.

It does not look like the #user1234 div is centered because the #user4 div text does not fill the available space. Put background-color:#c00; on #user1234 to see where it's boundaries are. (note: you must have overflow:hidden otherwise #user1234 does not have a height and you will not see the background-color).

Re: previous comment - There are no problems with using width and margin on the same tag.

Emily
I am going to vote this the best answer because it pointed to the real problem: the width of 1420px was completely miscalculated. Once the width was set to the right amount of 1000px, everything worked. Thanks! Thanks also to ncallaway for his alternative which otherwise would have been the best answer.
E Wierda