facing floating left and right issues - html

Question

I need 2 divs inside a big one:
the first will float left and second will float right
i gave the 1st div width of 75% and the 2nd 25%, it seems that the 2nd div is not finding its right place so it keeps coming under the left div on the right side
this is my code:
<div class="centerDiv2">
<span class="title2">LATEST BULLETIN</span>
<hr>
<div class="divLeft">
<img src="images/5891.jpg"/>
<span class="title">JUL 19</span>
<p class ="prog">"I Mathew</p>
</div>
<div class="divLeft">
<img src="images/42St.jpg"/>
<span class="title">JUL 19</span>
<p class ="prog">"I Mathew</p>
</div>
<div class="divRight">
<span class="title">RECENTLY</span>
<hr>
</div>
</div>
CSS:
.divLeft {
width:70%;
margin: 30 0;
}
.title2 {
font-size: 20px;
font-weight:bolder;
font-family: courier;
float: left;
width: 100%;
}
.centerDiv2 {
width: 1000px;
margin: 30 auto;
}
.divRight {
width:25%;
height:400px;
background-color: lightgray;
float:right;
margin: 30 0;
}

Answer 1

HTML:
<div class="centerDiv2">
<span class="title2">LATEST BULLETIN</span>
<hr>
<div class="leftDiv">
<div class="divLeft">
<img src="images/5891.jpg"/>
<span class="title">JUL 19</span>
<p class ="prog">"I Mathew</p>
</div>
<div class="divLeft">
<img src="images/42St.jpg"/>
<span class="title">JUL 19</span>
<p class ="prog">"I Mathew</p>
</div>
</div>
<div class="divRight">
<span class="title">RECENTLY</span>
<hr>
</div>
</div>
CSS:
.title2 {
font-size: 20px;
font-weight:bolder;
font-family: courier;
width: 100%;
}
.leftDiv{
width: 70%; display: inline-block;
}
.divRight {
display: inline-block; vertical-align: top; height: 400px; width: 25%;background-color: lightgray;
}

Answer 2

hi dude the issue is with width 75% and 25% using with the margin because you are giving margin though you have already 100% of you canvas means(body)
.wrapper{
margin: 30px 0;
}
.divLeft {
width:70%;
background-color:red;
}
.title2 {
font-size: 20px;
font-weight:bolder;
font-family: courier;
float: left;
width: 100%;
}
.centerDiv2 {
width: 1000px;
margin: 30px auto;
}
.divRight {
width:25%;
height:400px;
background-color: lightgray;
float:right;
margin: 30px 0;
background-color:black;
}
<div class="centerDiv2">
<span class="title2">LATEST BULLETIN</span>
<hr>
<div class="wrapper">
<div class="divLeft">
<img src="images/5891.jpg"/>
<span class="title">JUL 19</span>
<p class ="prog">"I Mathew</p>
</div>
<div class="divLeft">
<img src="images/42St.jpg"/>
<span class="title">JUL 19</span>
<p class ="prog">"I Mathew</p>
</div>
</div>
<div class="divRight">
<span class="title">RECENTLY</span>
<hr>
</div>
</div>