Clearing Float

Using an extra following div to which clear has been applied

by prasun_sultania

HTML

<div class="news clear">
<img src="https://www.google.co.in/images/srpr/logo3w.png" alt="my pic"/>

<p>    
I am trying to fix a DIV so that it is always parked at the top of the screen using:

position:fixed; top:0px; right:0px;

However, the DIV is inside a container that is centered. When I use position:fixed - it fixes the DIV relative to the browser window, so its up against the right side of the browser. Instead, it should be fixed relative to the container.

    I know that position:absolute can be used to fix an element relative to the DIV, but when you scroll down the page, the element vanished and dosen't stay parked at the top as with position:fixed

Is there hack or workaround so its possible to achieve this?
</p>    

</div>

<div class="afterdiv">
</div>

CSS

.news {
background-color: lightgreen;
border: solid 1px black;
}

.news img {
float: left;
    width :200px;
    height :50px;
}

.news p {
    float: right;
}

.afterdiv{
background-color: green;
border: solid 1px black;
    height: 150px;
    width: 50px;
}

.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}