css centering dynamic div

Question

I have a div #content where i on the run add left floated divs #block and there are divs with fixed width on either side of div (a) , #lcontent and #rcontent How do i get #content to remain at center when side divs have dynamic height and #content changes over time

content should remain in center wether there are 2,3,4 or 100 #block inside it. But the #block should always be on the left of #content

Only #lcontent, #rcontent and #block have fixed width

html code

<div id="contentcontainer">
    <div id="lcontent"></div>
    <div id="mcontent">
        <div id="content">
            <div id="block"></div>
            <div id="block"></div>
            <div id="block"></div>
            <div id="Block"></div>
            <div id="Block"></div>
        </div>
    </div>
    <div id="rcontent"></div>
</div>

css code

#lcontent
{
float: left;
width: 100px;
min-width: 100px;
min-height: 100px;
background: lightblue;   
}
#rcontent
{
float: right;
width: 100px;
background: lightblue;
}
#mcontent
{
background: lightgrey;
float: right;
right: 50%;
position: relative;
}
#content 
{
float: right;
right: -50%;
position: relative;
background: green;
min-height: 200px;
text-align: center;
}
#block
{
margin: 5px;
width: 300px;
border: 1px solid red;
display: inline-block;½ 
height: 150px;   
}

Answer 1

You can add invisible placeholders to the end of your inline blocks. That will left-align the last row.

http://jsfiddle.net/aakt65x4/

However, if you don't fill up the first row, the entire thing will appear left-aligned. But I think that's what you want, right?

HTML:

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

CSS:

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}

Answer 2

This will be very difficult using pure css and will need you to know the number of boxes that the container is going to have (and add a class to the parent depending on it) - which if this is dynamic content then you should have a server side language for this. You will also need a hell of a lot of media queries:

.container {
    text-align:center;
}
.centered {
    text-align:left;
    margin:auto;
}
.block {
    margin:3px;
    width:100px;
    height:100px;
    float:left;
    vertical-align:top;
    border:1px solid red;
}

.seven {max-width:770px;} /* this is the number of block * their outer width (margin + border + padding + width) */

/*one block*/
@media (max-width:219px) { /* this is the width of 2 blocks outer width -1px (you may need to add the width of the left and right column to this plus any left and right padding of the center column.  This is really the max width of the container div */
    .centered {
        width:110px; /* the outer width of a block */
    }
}

/*two blocks*/
/* keep adding media queries to either your max number of blocks or the largest screen size you want to support */
/*min width is 2 * 1 block outer width, max width is 3 * 1 block outer width - 1px*/
@media (min-width:220px) and (max-width:329px) {
    .centered {
        width:220px; /* the outer width of 2 blocks */
    }
}
@media (min-width:330px) and (max-width:439px) {
    .centered {
        width:330px;
    }
}
@media (min-width:440px) and (max-width:549px) {
    .centered {
        width:440px;
    }
}
@media (min-width:550px) and (max-width:659px) {
    .centered {
        width:550px;
    }
}
@media (min-width:660px) and (max-width:769px) {
    .centered {
        width:660px;
    }
}
@media (min-width:770px) and (max-width:879px) {
    .centered {
        width:770px;
    }
}
@media (min-width:880px) and (max-width:989px) {
    .centered {
        width:880px;
    }
}
@media (min-width:990px) and (max-width:1100px) {
    .centered {
        width:990px;
    }
}

<div class="container">
    <div class="centered seven"><!--the seven class is the number of children blocks-->
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

Fiddle Example

Otherwise you can try a js solution