Microdata and divs - html

Question

My two divs (article-tag-summary and article-date-summary) belong under article-image-summary div. This is good and cannot change.
Everything belongs under schema.org/Article, thus also <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">.
Issues:
1 - If I close <div class="article-image-summary"
itemprop="image">, then the two divs fall outside the image and
this is bad for my CSS styling.
2 - If I do NOT close it, then
itemprop="articleSection and itemprop="datePublished are NOT
recognised in schema.org because they relate to ImageObject and
NOT schema.org/Article which is also bad.
This is a purely HTML problem... what I need is to have the date-summary and tag-summary fall under image-summary (so NOT closing div before them), and that these two divs have itemprops that relate to schema.org/Article and NOT to ImageObject.
The example below shows the two closing divs before date and tag, meaning the schema.org validation works. But in this case, my CSS styling for these two elements do not work because they fall outside the image-summary div.
<div itemscope itemtype="http://schema.org/Article">
<div itemprop="image" itemscope itemtype=
"http://schema.org/ImageObject">
<div class="article-image-summary" itemprop="image">
<meta content="auto">
<meta content="100"><a href="#"><img alt=
"#" itemprop="url" src=
"#"></a>
</div>
</div>
<div class="article-tag-summary" itemprop="articleSection">
<a href="#>tag</a>
</div><!--<div class="article-data">-->
<div class="article-date-summary" itemprop="datePublished">
date
<div class="page-views">
<i class="fa fa-eye"></i> count
</div>
</div><!--</div>-->
<h2 class="title-article-masonry" itemprop="headline"></h2>
</div>

Answer 1

You might be able to solve this with Microdata’s itemref attribute.
For that to work, you have to move the article-tag-summary and the article-date-summary (and perhaps other properties that follow) outside of the schema:Article element.
Give each property an id, and reference these id values in the itemref attribute ("foo1" and "foo2" in my example):
<div itemscope itemtype="http://schema.org/Article" itemref="foo1 foo2">
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
</div>
</div>
<div id="foo1" class="article-tag-summary" itemprop="articleSection">
</div>
<div id="foo2" class="article-date-summary" itemprop="datePublished">
</div>
If you need a grouping div for all of these parts, you can of course add it. As you use Schema.org’s Article type, the article element is most likely more appropriate than a div.