Question

I have the tweet HTML source like below. They are line by line. In browser they will also display one line by one line. What I want in browser is not line by line but the layout:
the image abc.jpg is on the left, all the other elements are on the right side of the abc.jpg, and elements on the right side of the abc.jpg are followed one by one (not break). I do not know if have describe what I what clearly. The result should be like 2 columns: ldft is images, right is tweet information. The result is like what we see in twitter.

The tweet HTML source is like below:

<div id="tweet"> // first tweet
<a href='http://twitter.com/abc'><img src='http://a3.twimg.com/profile_images/965532155/abc.jpg'></a>
<div id='tweetUser'><a href="http://twitter.com/abc/statuses/7021860487168000" onmousedown='return touch(this.href,0)'>abc</a> :</div> 
<div id='tweetText'>this is the content. <a onmousedown="return touch(this.href,0)" href="http://fb.me/MWgZzSzx">http://fb.me/MWgZzSzx</a></div>
<div id='tweetTime'>2010-11-23 04:45:20</div>
<div id='tweetReply'> <a onmousedown='return touch(this.href,0)' target='replies' style='color:#0A0;' href='http://twitter.com/home?status=@abc'>Reply</a></div></div>

<div id="tweet"> // second tweet
...
...

I do not know how to do it. Can you help me?

Answer 1

It’s just some basic CSS: http://jsfiddle.net/9GNxT/11/

CSS:

.tweet {
    background-color: rgb(200, 200, 255);

    width: 300px;
    height: 100px;
}

.tweet img {
    float: left;

    width: 100px;
    height: 100%;

    background-color: rgb(200, 255, 200);
}

You do know that this won’t work properly with that HTML? You have multiple elements with the same id= attribute. You’ll need a class (which is what I’ve done here), as many elements can share a class.