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

tags:

html

views:

answers:

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.

+1 A:

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.

Chris Lively 2010-10-14 18:58:14

This is the Doc Type I'm using. Is this good or bad? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

hamlin11 2010-10-14 19:00:04

From W3Schools: "The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly."

Tyler 2010-10-14 19:03:33

@hamlin11: I would never use a transitional doctype unless there was a very good reason. Switch to strict and see what happens. You'll find that the rendering will be a lot more consistent across browsers.

Chris Lively 2010-10-14 19:05:48

@hamlin11: Your doctype, HTML 4.01 trans without a system identifier, will trigger quirks mode, which should be avoided at all costs. If you need a transitional doctype for whatever reason and can't use a strict one, at least add a system identifier. It should look like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Daniel 2010-10-14 19:35:16

Forgot to add this nice link. Wikipedia lists a lot of possible doctypes and which mode they trigger in different browsers: http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

Daniel 2010-10-14 19:38:18

+1 A:

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

Šime Vidas 2010-10-14 18:59:40

ansaurus

tags:

views:

answers:

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

related questions