overflow: hidden pushes next div down

[Darghon]

Hi all,

 

I've been creating a somewhat responsive layout for an existing application.

 

Some of the pages contains sets of data that have been grouped.

 

I've added styles to show them as blocks next to each other as long as enough space is available. so full screen is shows 3 blocks next to eachother, on a smaller 2 blocks, or 1 block depending on the available width.

 

If the content of one block exceeds the length allocated, I have an additional class "clipped" that turns the overflow hidden, and adds ellipses to the text.

 

But as the title suggests, doing this pushes the next div down which looks ugly.

Removing the overflow:hidden style fixes the issue, but makes the text run out of bounds.

 

Listed below are the html uses, and the css related.

Can anyone help me resolve this issue?

 

(The additional style code in the full line value is to ensure that multi line texts are still positioned next to the label and not under it)

 

Css:

#wrapper label { float:left; font-weight:bold; text-align: right; width:200px; margin-right:10px; }
 
#main #main_wrapper .group_content { display: block; }

#main #main_wrapper .group_content .attribute_block { display: inline-block; min-width: 400px; margin-right: 20px; }

#main #main_wrapper .group_content .attribute_block.full_line { display: block; min-width: 100%; }



#main #main_wrapper .group_content .attribute_block input,

#main #main_wrapper .group_content .attribute_block textarea { max-width: 300px; }

#main #main_wrapper .group_content .attribute_block select { max-width: 322px; }
 
.clipped { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

Html:

<div class="group_content clearfix">

            <div class="attribute_block full_line clearfix">

                <div class="label"><label>Beschrijving</label></div>

                <div style="float: right; width: calc(100% - 210px);" class="value">Addendun voor een raamovereenkomst.</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Auteur</label></div>

                <div class="value clipped">Quickstage Support</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Aangemaakt op</label></div>

                <div class="value clipped">19/12/2012 10:14:54</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Laatste aanpassing op</label></div>

                <div class="value clipped">19/12/2012 10:14:54</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Gegevensbron</label></div>

                <div class="value clipped">Schooljaar - Klas - Leerling - Stageperiode</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Bestandsnaam</label></div>

                <div class="value clipped">Aanvullendbijraamovereenkomst.docx</div>

            </div>

        </div>

[scootstah]

Are you able to re-create the problem in JSFiddle? I have put your code in but nothing looks wrong to me. I added red borders to identify where the boundaries of each section are.

 

http://jsfiddle.net/zbn3pvh8/