Ik heb een class (.maincol_menuitem) die ik meerdere malen naast elkaar wil positioneren. Dit doe ik middels(float:left;), maar nu wil ik deze reeks ook gecentered in hebben.
Ik heb werkelijk geen idee hoe dit aan te pakken. Wanneer ik margin: 0 auto; gebruik, werkt dit alleen zonder de float te gebruiken.

Deze divs worden binnen de div #maincol geplaatst, welke op zijn beurt weer een float:right; heeft.
Kan iemand mij helpen.

Heb je misschien een voorbeeld online staan? Of het ontwerp ergens?

PHP Code:

<div id="pagewidth" >
 <div id="header">Head</div>
 <div id="wrapper"class="clearfix" > 
 <div id="maincol">
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
  <div class="maincol_menuitem"></div>
 </div>
 <div id="leftcol">Left Column</div>
 </div>
 <div id="footer" > Footer 
 </div>
</div> 


PHP Code:

html, body
{ 
 margin:0; 
 padding:0; 
 text-align:center; 
} 
 
#pagewidth
{ 
 width:1000px; 
 text-align:left;  
 margin-left:auto; 
 margin-right:auto;  
} 
 
#header
{
 position:relative; 
 height:85px; 
 background-color:#FFFFFF; 
 width:100%;
} 
 
#leftcol
{
 border:dashed 1px;
 width:14%; 
 float:left; 
 position:relative; 
}
 
#maincol
{
 
 border:dashed 1px;
 background-color: #FFFFFF;  
 float: right; 
 display:inline; 
 position: relative; 
 width:85%; 
}
.maincol_menuitem
{
 height:150px;
 width:150px;
 margin:3px;
 float:left;
 border:solid 1px;
 border-top-color:#F2F2F2;
 border-left-color:#F2F2F2;
 border-right-color:#BDBDBD;
 border-bottom-color:#BDBDBD;
}
.maincol_menuitem:hover
{
 border:solid 1px;
 border-top-color:#BDBDBD;
 border-left-color:#BDBDBD;
 border-right-color:#F2F2F2;
 border-bottom-color:#F2F2F2;
}
 
#footer
{
 height:50px; 
 background-color:#FFFFFF; 
 clear:both;
} 
 
.clearfix:after 
{
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}
 
.clearfix
{
 display: inline-block;
}
* html .clearfix
{
 height: 1%;
}
.clearfix
{
 display: block;
} 


#maincol
{

border:dashed 1px;
background-color: #FFFFFF;
float: right;
display:inline;
position: relative; /* wat doet deze? */
width:85%;
text-align:center; /* moet elementen binnen deze div centreren */
}

Dat heeft niet mogen baten.
Ik krijg de .leftcol_menuitem alleen gecentreerd wanneer ik de float verwijder en vervang voor margin:0 auto;

De #maincol aanpassen naar text-align:center; heeft geen effect op de divs, wel op de text.

Float botst met margin voor zover ik kan constateren.

Het hoeft niet perse op deze manier, wat ik wil is simpel. Meerdere divs horizontaal, gecentreerd binnen een andere div.

En gewoon met een padding in de #maincol?