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: [email protected]
[mailto:[email protected]] On Behalf Of martin
Sent: June-22-10 5:06 PM
To: [email protected]
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 [[email protected]]
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 [[email protected]]
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/
