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/
