Greetings,
I am using a list to layout three images horizontally along the bottom of
a content column. The content column is fluid, set to 70%. I would like,
if possible, to have my <ul> stay centered within the liquid content
column as the window is resized, and at the same time, have each <li>
contained with in the <ul> to remain evenly spaced horizontally.
Theoretically, how I though it would work:
Center the <ul> with margin: 0 auto; and text-align: center; for IE; then
set each <li> to width: 33%, (there are three images in this example) and
then center the images with in each <li> through margin: 0 auto; and
text-align: center again.
Here is the basic markup and general styles:
<!--HTML-->
<ul id="content-images">
<li><img src="i/content-img-polar.jpg" width="140" height="140" /></li>
<li><img src="i/content-img-boards.jpg" width="140" height="140" /></li>
<li><img src="i/content-img-adidas.jpg" width="140" height="140" /></li>
</ul>
/* CSS */
#content-images {
margin: 0 auto;
text-align: center;
padding: 0;
width: 100%;
display: inline;
float: left;
}
#content-images li {
margin: 0 auto;
display: inline;
width: 33%;
padding: 0;
float: left;
}
#content-images li img {
display: block;
margin: 0 auto;
text-align: center
width: 140px;
float: left;
}
Does anyone have an example of centering items horizontally with in a
liquid width column? I read over the Wiki, (and endless Google results)
but the details on centering multiple items in a liquid container were not
too great.
Using a list seemed to make the most sense, but I am open to other
suggestions.
I need this to work in as many browsers as possible, preferably all
flavors of IE 5+ (Mac OS X and PC) and then Mozilla, Gecko, etc.
Thanks,
Jono
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
