how to layout the wbepage according to the image?

[runeveryday]

2012-10-31_085619.png

how to layout the webpage according to the image?

the following is my html. but i feel the layout is not good? is there a better way to get that?

    <div class="test">
        <p>p<br />r<br />o<br />g<br /></p>
        <img  src="#" />
        <div class="link">
            <a href="#">one</a><a href="#">two</a><a href="#">test</a><br />
            <a href="#">three</a><a href="#">fourtest</a><br />
            <a href="#">example</a><a href="#"></a><a>more </a>
        </div>
    </div>

ps:the layout which locates on the right of the image is bad.if the test div are many.when under IE7 ,there are some misplacement in it. is there another way to layout it?

[ralph.m]

Yeah, I don't think I'd use <br> elements there ... but you haven't posted any layout information as yet (i.e. CSS).

[runeveryday]

Yeah, I don't think I'd use <br> elements there ... but you haven't posted any layout information as yet (i.e. CSS).

if you could not use br, which element will you be use?

[ralph.m]

if you could not use br, which element will you be use?

It depends ... I wonder if it's worth doing as text at all, because it doesn't mean much. I would use an image with meaningful alt text, or perhaps CSS3 to make the text vertical ... although that won't work in all browsers.

Or perhaps you could wrap the word in a column div, and each letter in a div set to width: 100% ... but I don't see the point, personally.

[dresden_phoenix]

For that amount of effort you could wrap each letter in a span, display:block; and width:1em (or whatever) to the paragraph.