CODEWITHSUNDEEP
javascriptjqueryhtmlcss
udexter
udexter

Reputation: 2347

Position a div inside another with fixed and now "white space"

I need to do something like:

enter image description here

This is how far I know: http://jsbin.com/apikiw/3/edit#preview

The problems is that I can't put it between the <p /> because it's dynamic content... how I can solve that?

Thank you!

Upvotes: 0

Views: 196

Answers (1)

CompanyDroneFromSector7G
CompanyDroneFromSector7G

Reputation: 4517

The example you have given looks like it has a "float:right;" style on the quotation. If this is dynamic, you will need to mark is as different to the rest of the content somehow.

This is what I did v quickly: http://www.cyba.co/test.html

Note in the HTML that the quoted section appears just before the section it's indented into. If this text is marked as the heading for that section, this is how you should structure the HTML.

[Edited to show CSS and jQuery]

.1-post-content p {
    display:block;
}

$(document).ready(function() {
    var $quotation=$('.1-post-quotation').clone();
    $('.1-post-quotation').remove();
    $quotation.insertAfter('.1-post-content p:nth-child(1)');
}

Notes: This is the principal, but of course you still need to tailor it to your needs, e.g. how the data changes for each usage, identifying where to put the quoted part, etc. Also if you do use jQuery, don't forget to include the jQuery script file!

I don't want to assume too much - are you ok with where to add the CSS and script?

Upvotes: 1

Related Questions