Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Centering divs placed in other div :)

C

chameleon81

macrumors 6502
Original poster
May 16, 2006
434
0
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;
	}
 

Attachments

  • Screen shot 2010-02-03 at 23.00.04.jpg
    Screen shot 2010-02-03 at 23.00.04.jpg
    126 KB · Views: 122
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.
 
angelwatt said:
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.
Click to expand...


can I wrap them in a maincontent div and get them centered?
 
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?
 
IgnatiusTheKing said:
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?
Click to expand...

yes it will but what happens if I decide to display 4 columns instead of 3. I will have to calculate everything again.
 
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.
 
chameleon81 said:
yes it will but what happens if I decide to display 4 columns instead of 3. I will have to calculate everything again.
Click to expand...

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?
 
angelwatt said:
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.
Click to expand...


Thanks for the detailed answer. I'll do it this way.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back