CODEWITHSUNDEEP
htmlcssckeditor
MZON
MZON

Reputation: 305

CKEditor to respect block elements

I'm trying to get CKEditor to respect block elements like div's but I can't manage it to work.

Here's the sample code I use 

<div class="row" >
<div class="col-md-12">
<h1><img alt="" src="http://placehold.it/252x337" style="margin-left: 10px; margin-right: 10px; float: left; width: 252px; height: 337px;" />What is it?</h1>

<p><span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor elit venenatis tristique mollis. Ut quis ipsum lectus. Curabitur vestibulum, ipsum ac molestie posuere, dolor est faucibus risus, id volutpat nisi magna vel velit. Pellentesque vel interdum mi. In justo erat, hendrerit a ultricies nec, pharetra vitae nisl. Fusce vel purus risus. Etiam porttitor varius turpis, sed vehicula arcu aliquam eu. Morbi vehicula euismod nibh, ut semper nulla sollicitudin a. Morbi vitae tellus auctor, sollicitudin arcu sed, porta urna. Maecenas eu scelerisque orci. Proin vitae lobortis nisi, at suscipit mauris. Nam eu ultrices velit, nec mattis velit. Ut feugiat lorem lectus, nec feugiat justo ultricies non.</span></p>
</div>
</div>
<!-- /row -->

<div class="row" >
<div class="col-md-12">
<h1>Lorem</h1>

<p><img alt="" src="http://placehold.it/168x113" style="margin: 0px 10px; float: right; width: 168px; height: 113px;" /><span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor elit venenatis tristique mollis. Ut quis ipsum lectus. Curabitur vestibulum, ipsum ac molestie posuere, dolor est faucibus risus, id volutpat nisi magna vel velit. Pellentesque vel interdum mi. In justo erat, hendrerit a ultricies nec, pharetra vitae nisl. Fusce vel purus risus. Etiam porttitor varius turpis, sed vehicula arcu aliquam eu. Morbi vehicula euismod nibh, ut semper nulla sollicitudin a. Morbi vitae tellus auctor, sollicitudin arcu sed, porta urna. Maecenas eu scelerisque orci. Proin vitae lobortis nisi, at suscipit mauris. Nam eu ultrices velit, nec mattis velit. Ut feugiat lorem lectus, nec feugiat justo ultricies non.</span></p>
</div>
</div>

Here's the resultenter image description here

And here's how I expect to look

enter image description here

I also tried to set the width of the divs to 100% but it didn't work. As far as I know the block element take as much space as it can. But it seems doesn't work in CKEditor. So is it possible to achieve what I'm trying to do?

Upvotes: 0

Views: 91

Answers (1)

Jon P
Jon P

Reputation: 19772

Your code is behaving as it should:http://jsfiddle.net/b08yhh56/. The first image is floated, that takes it out of the normal document flow, everything else is flowing around it. This is nothing to do with CKEditor.

To get the result you are looking for add clear:left to subsequent divs http://jsfiddle.net/b08yhh56/1/

Upvotes: 3

Related Questions