alignment of newsletter page is not correct in css - html

Question

Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,

Answer 1

Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.

Answer 2

You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.