On Tuesday, June 23, 2009 2:11:38 pm MEM wrote:
> Hello,
>
> I have three wrappers that I've put side by side by declaring the property
> float:left;
> The problem is that I'm unable to center them.
>
> Here:
> http://www.cantinho.org/pt/cantinho-site/rounded_gradient_boxes_v4.html
>
>
>
> Any help? I live my thoughts and tries here:
>
Have you tried completely restructuring this? Here's my thoughts on how...
Instead of building the box, and then centering the contents, how about
centering the contents, and then building the visual box around it?
So put a wrapper div around your columns (actually you've already got one -
container-wrappers). You'll need to give it a height and a width since you've
floated everything inside it, but you can use ems like you did with the
columns. That'll "center" your floated contents in their container (ie the
container exaclty fits them). Make sure your container-wrapper is
position:relative
And then use absolute positioning to make your borders.
.top {positon: absolute; top:-1em; left: -1em; right: -1em; height: 1em;} /*
specifying both left and right creates an implied width. We still need to to
specify the hieght. the -1's make it all stay outside the container-wrapper
box.*/
.bottom {position: absolute; bottom: -1em; left: -1em; right: -1em; height:
1em;
.left {position: absolute; top: 0; bottom: 0; left: -1em; width: 1em;} /* top
and bottom create an implied height this time. we specify a width */
.right {position: absolute; top: 0; bottom: 0; right: -1em; width: 1em;}
---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/
