Re: [css-d] centering 3 float: left boxes

2010-06-23 Thread David Hucklesby 
On 6/22/10 5:06 PM, martin wrote:
 Hi all

 I'm trying to center 3 float:left boxes in the middle of the main
 container. So far I've got:

[code stripped]

You might like to try putting the content in a UL instead, and apply
inline-block instead of float. Here's an example of an image gallery:

http://www.brunildo.org/test/ImgThumbIB.html

Cordially,
David
--




__
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/

Re: [css-d] centering 3 float: left boxes

2010-06-23 Thread martin 
On 23/06/10 02:18, Tim Climis wrote:
 On Tuesday, June 22, 2010 8:06:27 pm martin wrote:
   
 Hi all

 I'm trying to center 3 float:left boxes in the middle of the main
 container.
 

 This might be pretty simple, actually...  Untested, but give:

 #container {
   float: left;
   margin: 0 auto;
 }

 a try.

 Theory: once you float the container, it will shrink to fit all the other 
 boxes.  
 I'm pretty sure that the rules of float will still keep the three floated 
 columns next to each other. And then the margin: auto centers the whole thing.

 If you need the main container wider than the three columns, you can add 
 another container div (#column_container or similar).

 ---Tim
 __
 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/
   


Thanks, but what it did was floating the container to the left (well, as
it's supposed to do), but I want to keep the
container in the middle of the screen.

regards
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/

Re: [css-d] centering 3 float: left boxes

2010-06-23 Thread martin 
On 23/06/10 15:31, David Hucklesby wrote:
 On 6/22/10 5:06 PM, martin wrote:
   
 Hi all

 I'm trying to center 3 float:left boxes in the middle of the main
 container. So far I've got:

 
 [code stripped]

 You might like to try putting the content in a UL instead, and apply
 inline-block instead of float. Here's an example of an image gallery:

 http://www.brunildo.org/test/ImgThumbIB.html

 Cordially,
 David
 --




 __
 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/
   
Thanks. That's another possibility. I'll create a separate page to test
this and see which one works best for me.


__
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/

Re: [css-d] centering 3 float: left boxes

2010-06-23 Thread David Laakso 
martin wrote:
 Hi all

 I'm trying to center 3 float:left boxes in the middle of the main container.
 So far I've got:


 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.


 Martin
   



I am not sure if this is what you are looking for but either way it was 
fun...
http://chelseacreekstudio.com/ca/cssd/3.html

Outermost width trimmed to sit in a 1024 window without drawing an 
h-scroll bar.
Cursory checked in the current versions of Mac Opera, FF, Camino, and 
Safari.
Not corrected for our good friends in Redmond.

Best,
~d


-- 
desktop
http://chelseacreekstudio.com/

__
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-d] centering 3 float: left boxes

2010-06-22 Thread martin 
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
| h1Everyday Expressions/h1
| div id=left_main class=curved
|   pThis is the left one/p
| /div
| div id=centre_main class=curved
| pThis is the centre one/p
| /div
| div id=right_main class=curved
|  pthis 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/

Re: [css-d] centering 3 float: left boxes

2010-06-22 Thread Peter Coates 
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
| h1Everyday Expressions/h1
| div id=left_main class=curved
|   pThis is the left one/p
| /div
| div id=centre_main class=curved
| pThis is the centre one/p
| /div
| div id=right_main class=curved
|  pthis 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/

Re: [css-d] centering 3 float: left boxes

2010-06-22 Thread Tim Climis 
On Tuesday, June 22, 2010 8:06:27 pm martin wrote:
 Hi all
 
 I'm trying to center 3 float:left boxes in the middle of the main
 container.


This might be pretty simple, actually...  Untested, but give:

#container {
  float: left;
  margin: 0 auto;
}

a try.

Theory: once you float the container, it will shrink to fit all the other 
boxes.  
I'm pretty sure that the rules of float will still keep the three floated 
columns next to each other. And then the margin: auto centers the whole thing.

If you need the main container wider than the three columns, you can add 
another container div (#column_container or similar).

---Tim
__
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/