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.
- Div float left centered
-
04-05-2010, 08:27 #1
- Berichten
- 98
- Lid sinds
- 14 Jaar
Div float left centered
-
04-05-2010, 08:36 #2
- Berichten
- 883
- Lid sinds
- 15 Jaar
Heb je misschien een voorbeeld online staan? Of het ontwerp ergens?
-
04-05-2010, 08:42 #3
- Berichten
- 98
- Lid sinds
- 14 Jaar
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;
}
-
04-05-2010, 08:48 #4
- Berichten
- 311
- Lid sinds
- 16 Jaar
#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 */
}
-
04-05-2010, 09:07 #5
- Berichten
- 98
- Lid sinds
- 14 Jaar
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.
-
04-05-2010, 21:53 #6
- Berichten
- 129
- Lid sinds
- 15 Jaar
En gewoon met een padding in de #maincol?
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic