CSS 3: When using image in Column-count the top of the columns no longer align

Question

I am using CSS3 column-count. When I insert a image into the column text, the top of the columns no longer align.

I cannot make it work in IE 10, Firefox, Opera and Chrome in Windows 8.

I have searched but could not find anything on the subject. What can I do?

Kinde Regards

http://jsfiddle.net/lassebjensen/KeWX8/

Html:

<div class="two-columns-article">

    <p>

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh sapien, adipiscing non arcu vel, pulvinar pretium mi. Proin porta, lectus id bibendum condimentum, magna massa tincidunt lorem, non dictum justo leo at purus. Morbi ultricies cursus diam ac pretium. Curabitur auctor, justo sit amet volutpat auctor, mauris tortor vehicula urna, in dignissim enim sapien eu tortor. Donec tincidunt mauris purus, vel volutpat nibh convallis at. Pellentesque condimentum nec purus eu rutrum. Duis elementum faucibus ante eget imperdiet. Aenean lacinia mauris et blandit hendrerit. Vivamus arcu risus, tincidunt non sapien sit amet, tempor laoreet mi. Sed at imperdiet mi, in ornare nibh. Pellentesque a laoreet orci, posuere volutpat diam. Aenean auctor odio sed vulputate condimentum. Vestibulum eu nibh nec lacus mollis placerat. Suspendisse suscipit ut lacus ornare eleifend. Sed faucibus velit id nulla vestibulum, quis suscipit augue eleifend.

    </p>

    <p>

<img   src="http://captainkimo.com/wp-content/uploads/2012/07/Common-Tiger-Butterfly-on-Yellow-Flower-in-Phuket-Thailand.jpg" >        Donec rutrum mauris quis faucibus consequat. Praesent pulvinar commodo facilisis. Duis id eros id sapien mattis vestibulum quis nec est. Sed eleifend feugiat vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac hendrerit est. In a purus velit. Aliquam a diam placerat, dignissim ipsum ut, viverra lorem. Donec ut egestas justo, in aliquam dolor. Sed a malesuada mi. Integer nec fringilla justo. In at laoreet mauris. Proin adipiscing mollis ullamcorper.


    </p>


</div>

Css:

.two-columns-article{
    -webkit-column-count: 2;
    -webkit-column-gap: 34px; 
    -webkit-column-rule: 1px dotted #d5d5d5;
    -moz-column-count: 2;
    -moz-column-gap: 34px;  
    -moz-column-rule: 1px dotted #d5d5d5;
    column-count: 2;
    column-gap: 34px; 
    column-rule: 1px dotted #d5d5d5;
}


img{ width:300px; float:right;}

Answer 1

I've updated your fiddle. My changes include adding:

.two-columns-article p { margin:20px 0; }
.two-columns-article > p:first-child { margin-top:0; }
img{ display:block; width:300px; }

This:

• Sets a margin on paragraphs to be 20px in the y direction
• Removes any top margin on the first paragraph
• Removes the float on your image, and set it to be block.

The columns seem to be well aligned to me :)

Edit: I also moved the image deeper into the paragraph to see if it would still look OK there. It does

Edit 2: I think that styling it this would look pretty kick-ass

.two-columns-article > p { 
    margin:20px 0;
    text-align:justify;
}
.two-columns-article > p:first-child { margin-top:0; }
.two-columns-article img { 
    display:block; 
    width:100%;
    margin:10px 0;
}

Answer 2

I've had a look at your fiddle and, for me, in Chrome adding the image makes no difference.

The issues is being caused by the margin on the first paragraph pushing the text down but, due to the way margin works with CSS3 columns, subsequent margin on columns does not push the them down from the top of the container but instead add spacing between them. It does make sense - as the content is now part of the 'column flow' rather than the 'block' flow.

The simple fix for your issue is:

.two-columns-article p:first-child {
    margin-top: 0;
}

http://jsfiddle.net/KeWX8/1/

Answer 3

Try this one:

[Demo]

In this i just removed the p tag.