<div class="support-css-shapes"></div>
<div class="wrapper clearfix">
<div class="circle"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ducimus, minus distinctio quae alias velit vel quas aliquid laboriosam, expedita reiciendis, aperiam quos! Soluta necessitatibus commodi adipisci eum optio mollitia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At provident in commodi similique deserunt atque nostrum fuga aspernatur eos quisquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sit.</p>
</div>
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
body {
font-family: "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;
color: #66595c;
background-color: #faf6ec;
}
/* Start the styles */
p {
line-height: 1.68;
}
h1 {
margin-bottom: 0;
}
h2 {
margin-top: 10px;
font-weight: 400;
line-height: 1.6;
}
.wrapper {
padding: 30px;
max-width: 720px;
margin-right: auto;
margin-left: auto;
}
/* Styles start here */
.circle {
width: 250px;
height: 250px;
background-color: #40a977;
border-radius: 50%;
float: left;
}
This Pen doesn't use any external JavaScript resources.