Well the first thing that comes to mind is to add a larger margin-left to #left_main. But the calculation is not obvious as your container is 1024px, and you have margins and padding of 1em.
Across the floating divs, you have 3x25%x1024px = 768px for the div content, 6x1em for the margins. So you wan #left_main { margin-left: 1024px - 768px - } But how many px in an em? This is dependent on you font-size and on the device displaying the page. I believe the answer is to eschew the use of px as a measurement everywhere, but that is a bit rough when you have pictures in the mix. Peter -----Original Message----- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of martin Sent: June-22-10 5:06 PM To: css-d@lists.css-discuss.org Subject: [css-d] centering 3 float: left boxes Hi all I'm trying to center 3 float:left boxes in the middle of the main container. So far I've got: ,----[ html markup ] | <body> | <div id="container" class="curved"> | <h1>Everyday Expressions</h1> | <div id="left_main" class="curved"> | <p>This is the left one</p> | </div> | <div id="centre_main" class="curved"> | <p>This is the centre one</p> | </div> | <div id="right_main" class="curved"> | <p>this is the right one</p> | </div> | <br class="cleared" /> | </div> | </body> | `---- ,----[ css ] | | body { | margin: 0; | padding: 0; | text-align: center; | } | #container { | width: 1024px; | margin: 0 auto; | text-align: left; | background-color: cyan; | border-style: solid; | } | #left_main, #centre_main, #right_main { | float: left; | width: 25%; | background-color: red; | margin: 1em; | padding: 1em; | } | .curved { | border-radius: 8px; /* CSS3 compliant browsers */ | -moz-border-radius: 8px; /* firefox */ | -webkit-border-radius: 8px; /* Google Chrome, Safari */ | -khtml-border-radius: 8px; /* Linux Browsers */ | behavior: url("css/border-radius.htc"); /* IE Browsers */ | background-image: url("1px.svg"); /* Opera 9.5+ */ | } | .cleared { | clear: both; | } `---- How would I have to change it so that those three boxes (left_main, centre_main, right_main) were positioned in the middle of the container. As you can see they (understandably) are slightly to the left. Thank you. cheers Martin ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/