CODEWITHSUNDEEP
htmlcss
Anuya
Anuya

Reputation: 8350

L-shaped border using HTML and CSS

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 ?

enter image description here

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>

Upvotes: 0

Views: 705

Answers (3)

simoncereska
simoncereska

Reputation: 3043

@Anuya take a look at this http://jsfiddle.net/TfXNf/

Upvotes: 3

Christos312
Christos312

Reputation: 466

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

Upvotes: 1

Danny Brady
Danny Brady

Reputation: 1935

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

Upvotes: 0

Related Questions