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!
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.