Как я могу добиться этого взгляда?

Question

мне нужно достигнуть следующей вид:

Потому что я использую CMS, структура я должен работать с это

<div class="outer"> 
<div class="ebrochure"><!--This is the box pulled off to the right, with "Ready to start .."--></div> 
<h1><!--This is the "The Easiest Way to Make an Impact" header--></h1> 
<h3><!--This is the "A Gift in Your Will or Living Trust" header--></h3> 
<p><!--This is the "Interested in ..." paragraph--></p> 
</div> 

Это достижимо выглядеть? Если да, то как?

Answer 1

У меня нет полного ответа для вас, потому что я должен уйти сейчас, но вот начало и некоторые полезные ресурсы

http://www.w3.org/wiki/Floats_and_clearing http://www.sitepoint.com/web-foundations/floating-clearing-css/

К сожалению я не смог закончить его! Если вы не получите больше ответов в среднем времени, прокомментируйте и сообщите мне, и если я рядом, я могу вам помочь.

HTML:

<div class="outer"> 

    <div class="ebrochure"> 
     <div id="salepoint"><p>Ready to start..Aliquid dolores conclusionemque ei ius, dico cibo ut sea, maiorum fastidii consequuntur quo ex. Vix quas temporibus ex. Consulatu appellantur sea id, usu an sumo saperet lucilius. Mel atqui inani at, ea ius choro insolens convenire. Te usu pericula adversarium.Qui tale dolore dissentias cu. Libris moderatius te est. No nam audiam singulis sapientem, eum ei laoreet legendos delicatissimi. Mei atqui sensibus percipitur no. Sed et persius gloriatur inciderint, et sea mazim impetus.An duo posse numquam offendit, recteque efficiantur reprehendunt mea ex. Est discere volumus eu, illud conceptam mei ad. Suas liber complectitur ea sit. An populo facete laoreet quo, ad fabellas expetenda referrentur est. Augue cotidieque vel an. Vix aliquid vivendo liberavisse ut, etiam euripidis ius no. Ei audiam corpora eos. Nihil eirmod omnesque vis et. Ut vide mundi definitiones vix, voluptua constituto mel</p><!--This is the box pulled off to the right, with "Ready to start .."--></div> 
    </div> 

    <h1><b>The Easiest Way</b><br> <i>to Make an Impact</i><!--This is the "The Easiest Way to Make an Impact" header--></h1> 
     <h3>A Gift in Your Will or Living Trust<!--This is the "A Gift in Your Will or Living Trust" header--></h3> 
    <div id="about"> 
     <p>Interested in helping blah with our mission bu tfeel overwhelmed by the thought of writing another check or giving your assets today? orem ipsum dolor sit amet, est tation minimum delicata et, per an ridens eruditi. Conceptam dissentias mea an, eam at definiebas omittantur, vis id autem labores erroribus. Aliquid dolores conclusionemque ei ius, dico cibo ut sea, maiorum fastidii consequuntur quo ex. Vix quas temporibus ex. Consulatu appellantur sea id, usu an sumo saperet lucilius. Mel atqui inani at, ea ius choro insolens convenire. Te usu pericula adversarium.Qui tale dolore dissentias cu. Libris moderatius te est. No nam audiam singulis sapientem, eum ei laoreet legendos delicatissimi. Mei atqui sensibus percipitur no. Sed et persius gloriatur inciderint, et sea mazim impetus.An duo posse numquam offendit, recteque efficiantur reprehendunt mea ex. Est discere volumus eu, illud conceptam mei ad. Suas liber complectitur ea sit. An populo facete laoreet quo, ad fabellas expetenda referrentur est. Augue cotidieque vel an. Vix aliquid vivendo liberavisse ut, etiam euripidis ius no. Ei audiam corpora eos. Nihil eirmod omnesque vis et. Ut vide mundi definitiones vix, voluptua constituto mel <!--This is the "Interested in ..." paragraph--></p> 
    </div> 
</div> 

CSS

#salepoint { 
    float: right; 
    display: block; 
    background: yellow; 
    padding: 10px; 
    width: 48%; 
} 

#about { 
    float: left; 
    display: block; 
    background: green; 
    padding: 10px; 
    width: 48%; 
}