Div alignment

Hi,

I'm trying to align four DIVs to create a 2x2 grid using the code
below:

<div id="0.0" style="POSITION : absolute ; BORDER : 1px; border-
style:solid; border-color:#0000FF; TOP:0px; LEFT:0px; HEIGHT:23px;
WIDTH:23px;"></div>

<div id="0.1" style="POSITION : absolute ; BORDER : 1px; border-
style:solid; border-color:#0000FF; TOP:24px; LEFT:0px; HEIGHT:23px;
WIDTH:23px;"></div>

<div id="1.0" style="POSITION : absolute ; BORDER : 1px; border-
style:solid; border-color:#0000FF; TOP:0px; LEFT:24px; HEIGHT:23px;
WIDTH:23px;"></div>

<div id="1.1" style="POSITION : absolute ; BORDER : 1px; border-
style:solid; border-color:#0000FF; TOP:24px; LEFT:24px; HEIGHT:23px;
WIDTH:23px;"></div>

In Firefox, the DIVs align correctly,but in IE there is a gap between
each one. Could anyone explain why this is? (I realise I could do this
much easier with a table, but I'd like to understand what the problem
is with aligning the DIVs).

Thank you

Scripsit wilsos6@googlemail.com:

Quote:

I'm trying to align four DIVs to create a 2x2 grid using the code
below:

What are you really trying to achieve, and why don't you post a URL? Empty
divs seldom make sense.

Besides...

Quote:

Are we supposed to
a) guess the content (note that absolute positioning is relative)
b) guess whether the document actually contains malformed id attributes and
whether they could relate to the problem
c) guess whether the actual style sheet contains a line break in
"border-style"
d) guess which web authoring software spat out the stuff?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 20 Feb, 10:41, wils...@googlemail.com wrote:

Quote:

I'm trying to align four DIVs to create a 2x2 grid using the code
below:

Why? If what you care about is "2x2 grid" then use a <table>.

If you want a tabular list of elements, arranged to best fit the page,
then use a list and float them (read the "Ansel Adams" thread in
alt.html for an example).

Absolute position and pixel sizing is rarely a good way to achieve
anything -- just some purely graphical purposes. It's painful to do
and fragile in use.

It's also impossible to comment on your code because you posted a
snippet, not a URL. We need to see the whole page, and in particular
the doctype declaration.

wilsos6@googlemail.com wrote:

Quote:

>
In Firefox, the DIVs align correctly,but in IE there is a gap between
each one. Could anyone explain why this is?

The difference is the interpretation of the "Box Model". IE gets it
wrong in Quirks Mode. Firefox follows the standards as do IE 6 and 7 in
Standards Mode.

Standards: border and padding are in addition to the box width/height

IE Quirks: padding and border widths are included in the box
width/height - therefore overall box is narrower/shorter.
<http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41>

Solution: Use the Strict Doctype Declaration to set Standards Mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

--
Gus

wilsos6@googlemail.com wrote:

Quote:

Hi,
>
I'm trying to align four DIVs to create a 2x2 grid using the code
below:
>

Three things:
1. What Andy and Jukka said. Except for Jukka's (d), which doesn't
interest me much.

2. If you put a 1px border around (that's *all* around) a 23px block,
what offset should you really use to keep neighboring blocks neighboring
and not actually trespassing? (I know; it depends on the box model.)

3. I actually copied your snippet and put it in a test page. I couldn't
reproduce your problem in IE6 until I removed the <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
What doctype are *you* using?

--
John

wilsos6@googlemail.com wrote:

Quote:

>
I'm trying to align four DIVs to create a 2x2 grid using the code
below:

1. Validate your code to eliminate syntax errors as a cause of rendering
problems. Hint: your ID values are invalid.

2. You may be trying to fix the wrong problem, by choosing a solution
when you haven't identified the real goal. Once the "what" is
established, the best "how" may be something entirely different.

3. Posting a URL is always better if you expect to get help.

--
Berg

Div alignment

re: Div alignment

re: Div alignment

re: Div alignment

re: Div alignment

re: Div alignment

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about