Centering divs placed in other div :)

Discussion in 'Web Design and Development' started by chameleon81, Feb 3, 2010.

  1. chameleon81 macrumors 6502

    Joined:
    May 16, 2006
    #1
    Hi,

    I want to center divs which are placed in a div.

    I want to have a header then a main content area where I will have 3 Citynames +cityphotos per row. The problem is that I can not center those 3 columns of information.


    I attached a screen shot because I believe it will explain you what I really want.
    This is the HTML
    HTML:
    !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>
    <link href="countrylanding.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    
    <div id="header"><h1>Logo</h1></div>
    
    
    
      <div class="citycontainer">
        <div class="cityname">
          <p>Brisbane ege ge eg</p>
        </div>
        
        <div class="cityphoto"><img src="3.jpg" /></div>
      </div>
      <div class="citycontainer">
        <div class="cityname">
          <p>Cairns</p>
        </div>
        
        <div class="cityphoto"><img src="3.jpg" /></div>
      </div>
      <div class="citycontainer">
        <div class="cityname">
          <p>Perth</p>
        </div>
        <div class="cityphoto"><img src="3.jpg" /></div>
      </div>
    
    </div><!--wrapper-->
    </body>
    </html>
    
    This is the CSS
    HTML:
    @charset "UTF-8";
    /* CSS Document */
    
    div{
    }
    div#header {
    	margin:10px;
    	border:solid 1px;
    	width:auto;
    	}
    
    div#wrapper {
    	position:relative;
    	border:solid 1px;
    width:720px;
    height:600px;
    <!--background-color:#120957;-->
    border:solid 1px;
    
    margin-left:auto;
    margin-right:auto;
    }
    
    div.citycontainer {
    	margin:5px;
    	border:solid 1px;
    	
    padding:5px;
    float:left;
    height:250px;
    width:200px;
    
    
    }
    
    p{
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:14px;
    	font-weight:bold;
    	color:#CCC;
    	}
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    In short, centering floated elements doesn't really work. One method to deal with it though here would be to set the .citycontainer to 33.3%. You'll likely need to tweak the padding though as well.
     
  3. chameleon81 thread starter macrumors 6502

    Joined:
    May 16, 2006
    #3

    can I wrap them in a maincontent div and get them centered?
     
  4. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #4
    If you make your wrapper the exact width of the three boxes (plus a little padding, if desired) everything will be centered, won't it?
     
  5. chameleon81 thread starter macrumors 6502

    Joined:
    May 16, 2006
    #5
    yes it will but what happens if I decide to display 4 columns instead of 3. I will have to calculate everything again.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    If you don't want to use percentages, then you can alternatively use pixels. You have a total width of 720px, then you subtract a 10px margin for each side of the three divs (which is 6) and then subtract six 1 pixel border pieces, which gives you 218, which is what you use for the width of each city container.
    Code:
    /* 720 - 10*6 - 1*6 = 654 / 3 = 218 */
    div.citycontainer {
      margin: 10px;
      border:solid 1px;
      padding: 0;
      float:left;
      height:250px;
      width:218px;
    }
    Floating removes things from layout flow, which is why you cannot center it. This type of approach is the only way.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Oh no, not the Maths!!! If you want to display 4 columns you'll have to change the CSS anyways, so why does it matter what CSS you'll be changing when it's only one property?
     
  8. chameleon81 thread starter macrumors 6502

    Joined:
    May 16, 2006
    #8

    Thanks for the detailed answer. I'll do it this way.
     

Share This Page