Fluid centered main content+fixed width sidebar

Trying to center a list of items in the main content area

[safin]

Here is what am trying to do.
make a 2 column layout with a fixed with (180px) sidebar on the right and a fluid main content area.

I used this as reference also: [webmasterworld.com...] (1st example)

<div id="nav"> 
<h1>sidebar</h1> 
<p>..more favourite foo......</p> 
</div>

<div class="header"><h1>Header text here</h1></div> 
<div id="wrapper"> 
<div id="content"> 
MAIN CONTENT
</div> 
</div>

Now in the main content area, i have to show a block of list items where each of the list item is of a fixed width (approx 180pixels)

Here is some pseudo code to give you an idea of what is MAIN CONTENT

<div class="mediahead">Most Recent Media</div>
<div style="min-height:100%; padding:20px;"> 
<ul> 
     <li class="mediarow mediasmall"> 
      <div>THUMBNAIL IMAGE</div><div>TEXT WITH LINK</div>
     </li>
    </ul>
</div>

the mediarow and mediasmall css is something like this

.mediasmall {
margin: 0px 20px 20px 0px;
float: left;
width: 180px;
}

.mediarow {
-moz-box-shadow: -2px 2px 2px #c8c8c8;
-webkit-box-shadow: -2px 2px 2px #c8c8c8;
background: rgb(255, 255, 255) none ;
border: 1px solid #cecece;
padding: 20px;
text-align: center;
}

You can guess this is a kind of photogallery layout, with the aim being that i want the photos to line up nicely in the center of the fluid content area (if the width is large enough). The present code lines them from the left (due to the float applied) and so basically if i have a fluid container that is "just not" large enough to accommodate 3 li element blocks, i end up with an ugly blank space in the content area towards right of the accommodated 2 li element blocks. If the ul was centered, it would have equal spacing on both sides and look prettier atleast.

I tried to apply text-align:center to the ul but that had no impact.
Since the container is fluid, i really cannot apply width property also.

Any way around this?

[JevgeniBogatyrjov]

If I do understand you right,
try to modify your main content styling as follows:

<div class="mediahead">Most Recent Media</div>
<div style="min-height:100%; padding:20px; text-align:center">
<ul style="margin:auto;">
<li class="mediarow mediasmall">
<div>THUMBNAIL IMAGE</div><div>TEXT WITH LINK</div>
</li>
</ul>
</div>

It is not tested but imo should be working fine.