Problem centering inside div

Hello!

I have a HorizontalLayout of 100% width with a Table inside of it which I want to center. However, it seems like for every layout component I add there is a div being generated around it with the same size which has
float: left
as an attribute.

This as you can understand makes things really hard for me…


<div style="float: left; margin-left: 0px;">
      <div class="v-horizontallayout v-horizontallayout-m2m-block-centering m2m-block-centering v-horizontallayout-m2m-neutralizer m2m-neutralizer" style="overflow: hidden; width: 1920px; height: 470px;">
           <div style="overflow: hidden; margin: 0px; width: 1920px; height: 470px;">
                <div style="height: 470px; width: 1920px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;">
                      <div style="float: left; margin-left: 0px;">
                           <div class="v-table v-table-v-table-striped v-table-striped v-table-m2m-block-centering m2m-block-centering">
                           </div>
                      </div>
                 <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
            </div>
     </div>
</div>

Why are these div’s with float: left being generated and how can I avoid it to center my table…?

Anyone have any bright ideas…? =)

Have you done HorizontalLayout.setComponentAlignment(table, Alignment.MIDDLE_CENTER) ?

good point… =)

I had totally forgot about that feature… I was trying to solve it using CSS exclusively.

Just out of curiosity, do you think this could be handled only using CSS or is it an instance of CSS not being enough…? If you know.

Thanks for the help!

Layouts like HorizontalLayout are not designed to be customized extensively in CSS. If you want to use CSS more freely, consider using CssLayout or some CSS-friendly layout add-on from the directory.

CssLayout you say…? That sounds interesting. Have to check that out!

Thanks for your wisdom!