CODEWITHSUNDEEP
html
Brian Webster
Brian Webster

Reputation: 30865

HTML - What is the correct way to do the following layout?

Diagram A can be accomplished by having a valign="top" and align="right" on the parent TD. The red rectangle is a div with style="float:right". This works on most browsers, but not IE. IE will put a linebreak before the div. The Text is not surrounded in any tag. It is the first thing in the TD.

The problem with the setup in Diagram A was solved by containing the text inside a Div with style="float:right" and placing that div AFTER the original red div, causing the layout in Diagram B. This appears to work in all browsers, but I have doubts that I'm accomplishing this layout requirement in the correct way.

alt text

Is there a better way to accomplish this?

I can't use a table, because the div on the right side has a slightly variable width and the distance between the green text and the left side of the right-side Div is very important. Basically, the absolute position of the text on the left depends on what happens in the right side div.

Upvotes: 0

Views: 72

Answers (2)

ChrisLively
ChrisLively

Reputation: 88074

Have you tried switching doctypes to get better control of your layout?

Specifically moving to one of the strict doctypes (A List Apart)

UPDATE
Adding Daniels link to Wikipedia's comparison of doc types.

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185933

So, your solution is to float both the text and the DIV to the right. This seems OK.

Another way to go would be to set display:inline-block on the DIV. Try that.

Live demo: http://www.vidasp.net/tinydemos/div-inside-td.html

Upvotes: 1

Related Questions