Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts

    Trying to "center" inner divs ...

    I have an wrapper with 3 inner divs. I am trying to figure out how to keep the same distance between the inner div's, but would like to have them centered on the page(as a group), rather than left-justified.

    I want to keep the wrapper at 900px though, as there might sometimes be 2 inner divs, and sometimes 4 or 5. I would greatly appreciate any help. Thank you, Buffmin

    I am attaching my code, but you can see my page at
    http://sample.cnjwebsolutions.com/
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    
    #wrapper{width:900px; overflow:auto ;margin:auto; background-color:#ff0000;}
    .inner_wrap{width:156px; overflow:auto; margin-right:50px;float:left; background-color:#66FFFF;}
    -->
    </style></head>
    
    <body>
    <div id="wrapper">
      <div class="inner_wrap">
      <h2><center>Div1</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/fully_chemtron_4000_up.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image14" width="156" height="156" border="0" id="Image14" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
         <div class="inner_wrap">
      <h2><center>Div2</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/fully_chemtron_4000_dn.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image15" width="156" height="156" border="0" id="Image15" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
           <div class="inner_wrap">
      <h2><center>Div3</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/fully_chemtron_4000_up.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image16" width="156" height="156" border="0" id="Image16" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
    </div>
    </body>
    </html>

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Edit:
    I just changed my method for something a little simpler as you're using fixed width.

    sean3838:
    Using text-align to center anything but text is bad practice.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    
    #wrapper{width:900px; overflow:auto ;margin:auto; background-color:#ff0000;}
    .inner_wrap{width:156px; overflow:auto; float:left; margin-left:108px; background-color:#66FFFF;}
    -->
    </style></head>
    
    <body>
    <div id="wrapper">
      <div class="inner_wrap">
      <h2><center>Div1</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImageImage14','','images/fully_chemtron_4000_up.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image14" width="156" height="156" border="0" id="Image14" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
      <div class="inner_wrap">
      <h2><center>Div2</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/fully_chemtron_4000_dn.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image15" width="156" height="156" border="0" id="Image15" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
      <div class="inner_wrap">
      <h2><center>Div3</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/fully_chemtron_4000_up.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image16" width="156" height="156" border="0" id="Image16" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
    </div>
    </body>
    </html>
    Last edited by dan-dan; 03-09-2012 at 12:48 AM.

  • Users who have thanked dan-dan for this post:

    Buffmin (03-09-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    I highlighted in red everything I added/changed. You just need to add a wrapper div with style="text-align: center;" around all your inner ones and in the css for your inner-class change margin-right: 50px; to margin: auto 25px; then just add display: inline-block;

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    
    #wrapper{width:900px; overflow:auto ;margin:auto; background-color:#ff0000;}
    .inner_wrap{width:156px; overflow:auto; margin:auto 25px;display: inline-block;float:left; background-color:#66FFFF;}
    -->
    </style></head>
    
    <body>
    <div id="wrapper">
     <div style="text-align:center">
      <div class="inner_wrap">
      <h2><center>Div1</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/fully_chemtron_4000_up.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image14" width="156" height="156" border="0" id="Image14" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
         <div class="inner_wrap">
      <h2><center>Div2</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/fully_chemtron_4000_dn.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image15" width="156" height="156" border="0" id="Image15" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
           <div class="inner_wrap">
      <h2><center>Div3</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/fully_chemtron_4000_up.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image16" width="156" height="156" border="0" id="Image16" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      </div>
    </div>
    </body>
    </html>

  • Users who have thanked sean3838 for this post:

    Buffmin (03-09-2012)

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Thanks Dan & Sean, but I still have a problem.
    My initial issue was that... I will have multiple rows. Some with 2 some with 3 and some with 4 elements.

    I would like to have each automatically center on the page.
    Initially mine would align on the left side.

    Dan's code does center them, but requires a "margin-left" of 108px, which works, but some rows might not have 3 elements.

    I tried yours Sean, but it doesn't seem to center.?

    I have all 3 examples at:

    http://sample.cnjwebsolutions.com/
    http://sample.cnjwebsolutions.com/dan.html
    http://sample.cnjwebsolutions.com/sean.html

    I do really appreciate any help as I cannot figure it out. Thanks, Buffmin

  • #5
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    You could change .inner_wrap to say .inner_wrap_3, .inner_wrap_4 then adjust the margin for each one accordingly.
    Simple math:
    (900px - (156px * numOfDivs)) / (numOfDivs + 1)

  • Users who have thanked dan-dan for this post:

    Buffmin (03-09-2012)

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    You got it Dan! Cool. That's the answer.
    Thank you very much. Good thinking. Buffmin

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Glad it worked out for you. The reason mine wasn't centered for you is b/c I forgot to tell you to delete float:left;

    If you do that it would work perfect. You don't need to do the math for the margin-left it will do everything for you

  • Users who have thanked sean3838 for this post:

    Buffmin (03-09-2012)

  • #8
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Saweet! Perfect.

    Thanks to both of you guys. Now I like to sit back and decypher your codes & learn from you both. Appreciate it. Buffmin

  • #9
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I don't mean this as any offence to sean3838, but text-align should only be used to align text. It will work on divs and such, but I don't see a reason to when another solution is so easily found.

  • Users who have thanked dan-dan for this post:

    Buffmin (03-09-2012)

  • #10
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Getting there. Still have ONE issue.

    Perfect with 2 or more elements, but if I go down to only 1 inner element, I get a scroll bar on the right side.

    And I do understand what you are saying about the "text-align" Dan
    (Just if I am doing multiple pages, the "auto-align sure is nice., but I do understand.)

    I appreciate your help! Buffmin ... Example.. http://sample.cnjwebsolutions.com
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #wrapper{width:900px; overflow:auto ;margin:auto; background-color:#ff0000;}
    .inner_wrap{width:156px; overflow:auto; margin:auto 25px;display: inline-block;background-color:#66FFFF;}
    -->
    </style></head>
    
    <body>
    <div id="wrapper">
     <div style="text-align:center"> 
     
      <div class="inner_wrap">
      <h2><center>Div1</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/fully_chemtron_4000_up.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image14" width="156" height="156" border="0" id="Image14" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
     <!--  <div class="inner_wrap">
      <h2><center>Div1</center></h2>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/fully_chemtron_4000_up.gif',0)"><img src="images/fully_chemtron_4000_up.gif" name="Image14" width="156" height="156" border="0" id="Image14" style="float:left;"/></a>
      </div><!-- end of man_img_div_ --> 
      
      </div><!-- end of "center" -->
    </div><!-- end of wrapper -->
    </body>
    </html>
    Last edited by Buffmin; 03-09-2012 at 03:11 PM.

  • #11
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Just delete overflow: auto; from #.inner_wrap

  • Users who have thanked sean3838 for this post:

    Buffmin (03-09-2012)

  • #12
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Thank you Sean.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •