Centering divs don't work as they should
I have looked for solutions and tried to implement what is often suggested, but I am having trouble horizontally centering a div inside another div.
With my CMS, I want to show up to four information blocks at the bottom of the page. So I am trying to fit between four and four divs in two containers. Four divs get 19%, 33%, or 49% of the available width, depending on how many divs are shown on the page. The inner container is supposed to be horizontally centered within the outer container. Thus, the group of four sections must, of course, be in the horizontal center. Since the inner container is the same width as the main content plus the two columns above it that are centered, it should be displayed vertically. The outer container spans the full width of the page and has a background image.
Now my code looks like this:
<!-- 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 stylesheets, I have the following:
#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 is as follows, skipping everything that goes beyond the straight hierarchical row:
<body><div id="wrapper_main"><center><table border="0" cellpadding="0" cellspacing="0" width="<?php echo $this->params->get('width'); ?>" id="main_table"><tbody>
Body css and tables below. Using Firebug I can't find anything in there that matters when shutting down.
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 dot joomlaloft.com.
As you can see, I gave the inner container a fixed width and left and right margins auto, which is often suggested as a way to center the div horizontally. However, the inner delimited container ends to the left.
Can this be done? Or if I try an alternative, such as putting the left and right margin variable on the left-most and right-most information divs?
I saw that there are many very good answers on stackoverflow, so I hope someone can tell me where I went wrong. Since this is not my inspiration ... Thanks so much for any help you can give!
PS By the way, this has to be one of the most intuitive and practical forums I've ever seen!
a source to share
The inner centered div cannot be wider than the containing div. In my browser, your site is 1200px wide and # user1234 is 1420px wide;
Set # user1234 to width: 90%; and each custom div up to width: 25%; when there are 4 divs. Put overflow: hidden; to # user1234 to clear the floats.
The div # user1234 doesn't seem to be centered because the text of the # user4 div doesn't fill the available space. Place the background color: # c00; to # user1234 to see where the borders are. (note: you must have an overflow: hidden otherwise # user1234 has no height and you won't see the background color).
Re: previous comment - No problem using width and margin in the same tag.
a source to share
I'm not sure why you are using width: 1420px for. Please follow this or this site for correct layouts in css. Another option would be to use css grid .
I personally recommend, take out the spreadsheet and switch to the fluid grid that works best for your site. It has a bit of a learning curve, but trust me, you'll be happier ever. There is a lot of work on your site; although the CSS could be changed for the better. CSS freenode usually provides good advice and criticism if you need immediate help.
Another thing, it is not recommended to use width and margin in the same tag
a source to share
What I did when I wanted to focus on the DIV was to position it relatively. Setting the left to 50% and the margin-left to 1/2 of the div's width will perfectly center the div in the container. I have used this in the past and as far as I know it works in most browsers (IE6 + and non-IE browsers). There might be a better way to do it though.
#user1234 { position: relative;
left: 50%;
margin-left: -710px;
width:1420px;}
a source to share