L-shaped border using HTML and CSS

Question

I need to populate data in the white space of the box shown in the picture. The Red portion will be an image, But still data has to be shown continuously in the white space. How can i achieve this using HTML and CSS ?

Updated with code :

 <div id="Content" runat="server">
    <img id="ad" src="images/sandbox.gif"  
            style="float:right; height: 200px; width: 150px;" alt="{alt}" />

    </div>

Answer 1

@Anuya看看这个http://jsfiddle.net/TfXNf/

Answer 2

Its better if you define a class in you css style in order to toggle all pictures that needs to have the same layout so

HTML

<img src="http://link.to/image.jpg" class="className" alt="Image"/>

CSS

.className{
float: right;
margin-right:2px; /*change these based on your layout*/
margin-bottom: 2px; /*change these based on your layout*/
}

Margins are needed to push the text a little bit away from the picture so you can create the illusion of the border

Answer 3

Just put a float onto your image:

<img src="{imageLocation}" alt="{alt}" style="float:right;" /> 

Ideally you would want to keep the styling separate from the content but this will give you the idea. Hope that helps