DATE: 2010-06-22
DIV TAG COLUMNS AND ALIGNMENT
SUMMARY: Horizonatl DIV TAG Alignment does not work correctly in Internet Explorer 7 or Microsoft Internet Explorer 8 or at least it does not work the way I anticapated it should work.
I have looked long and hard to try and find a solution to make div tags work as a table does. This solution wold have to be compatible with both internet explorer and firefox (IE7 or IE8 or firefox 3.0 or above)
TO NOTE: I did noticed a couple inconsistencies when the browser window resized..but in most resolutions it worked; if you can deal with the "NOT CENTERING OPTION:". another way around that is to set the size of a parent div using javascript.
BOTTOM LINE: IF YOU ARE WORKING WITH RELATIVE POSITIONING. STAY WITH TABLES. ALL BROWSERS HAVE A PRETTY CONSISTENT RENDERING FOR HTML TABLES.
DIV TAGS CAN WORK ALRIGHT AND IF YOU KNOW YOUR ABSOLUTE COORDINATES. THEY CAN ACTUALLY BE BETTER THAN HTML TABLES.
ONE NOTE: someone did mention removing the DOCTYPE declaration at the top of the page and this would fix it....but I belive it broke other things such as my javascript and such,
Another similar page to this on my website is this:
div tag PRINT SCREEN FOR FIREFOX:
DIV TAG PRINT SCREEN FOR CHROME:
div tag print screen for internet explorer 8
HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>TESTING DIV TAGS</title>
<style type="text/css">
.FontColorAndSize
{
font-family: Arial, Sans-Serif;font-size: 12px;color: White;font-weight: bold;background-color: #000000;padding: 2 2 2 2; margin: 0 0 0 0; height: 100%; width: 100%; text-align: center;}
.CourseContent
{
background-color: #cccccc;}
#centerNav { margin: 0 auto; width: 800px; border: 1px solid red; } </style></head>
<body class="FontColorAndSize">
<center>
<br /><br />ATTEMPT FINAL<br /><br />
<div style="border: medium double purple; text-align:center; float: none; width:96%;">
<br />
<div style="border: medium double orange; position: relative; float: left; display: table-column; top: 0px; left: 0px; height: 14px; width: 33%;">DOES NOT WORK COLUMN 1</div>
<div style="border: medium double blue; position: relative; float: left; display: table-column; top: 0px; left: 0px; height: 14px; width: 34%;">DOES NOT WORK COLUMN 2</div>
<div style="border: medium double green; position: relative; float: left; display: table-column; top: 0px; left: 0px; height: 14px; width: 33%;">DOES NOT WORK COLUMN 3</div>
<br />
<br />
</div>
<br /><br />
<div style="border: medium double purple; text-align:center; float: none; display: inline; width:96%;">
<br />
<div style="border: medium double orange; position: relative; float: left; display: inline; top: 0px; left: 0px; height: 14px; width: 32.5%;">DOES NOT WORK <br />COLUMN 1<br />COLUMN 1<br />COLUMN 1</div>
<div style="border: medium double blue; position: relative; float: left; display: inline; top: 0px; left: 0px; height: 14px; width: 33.5%;">DOES NOT WORK <br />COLUMN 2<br />COLUMN 2<br />COLUMN 2</div>
<div style="border: medium double green; position: relative; float: left; display: inline; top: 0px; left: 0px; height: 14px; width: 32.5%;">DOES NOT WORK <br />COLUMN 3<br />COLUMN 3<br />COLUMN 3</div>
<br />
<br />
</div>
<br /><br /><br /><br /><br />
<br />this works the best out of all possiblities<br />2010-06-22<br />TESTED and works in IE 8.x, ie 7.x, firefox 3.x, chrome 5.x<br />
<div style="border: medium double orange; position: relative; float: left; display: block; top: 0px; left: 0px; width: 32.5%;">COLUMN 1<br />COLUMN 1<br />COLUMN 1<br />COLUMN 1</div>
<div style="border: medium double blue; position: relative; float: left; display: block; top: 0px; left: 0px; width: 33.5%;">COLUMN 2<br />COLUMN 2<br />COLUMN 2<br />COLUMN 2</div>
<div style="border: medium double green; position: relative; float: left; display: block; top: 0px; left: 0px; width: 32.5%;">COLUMN 3<br />COLUMN 3<br />COLUMN 3<br />COLUMN 3</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
<div id="centerNav">
<div style="border: medium double orange; position: relative; float: left; display: block; top: 0px; left: 0px; width: 31.5%;">COLUMN 1<br />COLUMN 1<br />COLUMN 1<br />COLUMN 1</div>
<div style="border: medium double blue; position: relative; float: left; display: block; top: 0px; left: 0px; width: 32.5%;">COLUMN 2<br />COLUMN 2<br />COLUMN 2<br />COLUMN 2</div>
<div style="border: medium double green; position: relative; float: left; display: block; top: 0px; left: 0px; width: 31.5%;">COLUMN 3<br />COLUMN 3<br />COLUMN 3<br />COLUMN 3</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="border: medium double orange; position: relative; float: left; display: block; top: 0px; left: 0px; width: 32.5%;">COLUMN 1<br />COLUMN 1<br />COLUMN 1<br />COLUMN 1</div>
<div style="border: medium double blue; position: relative; float: left; display: block; top: 0px; left: 0px; width: 33.5%;">COLUMN 2<br />COLUMN 2<br />COLUMN 2<br />COLUMN 2</div>
<div style="border: medium double green; position: relative; float: left; display: block; top: 0px; left: 0px; width: 32.5%;">COLUMN 3<br />COLUMN 3<br />COLUMN 3<br />COLUMN 3</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="border: medium double purple; text-align:center; float:none; width:98%;">
<br />HELLO DOUG <br />
<div style="border: medium double yellow; text-align:center; float:none; width:97%;">
<br />works in IE 8.x and 7.x<br />2010-06-22<br />DIV TAG CONTAINERS DO NOT WORK WELL IN FIREFOX OR CHROME<br />
<div style="border: medium double orange; text-align:center; float: left; display: inline; width: 32.1%;">COLUMN A<br />COLUMN A<br />COLUMN A<br />COLUMN A</div>
<div style="border: medium double blue; text-align:center; float:left; display: inline; width: 33.1%;">COLUMN B<br />COLUMN B<br />COLUMN B<br />COLUMN B</div>
<div style="border: medium double green; text-align:center; float:left; display: inline; width: 32.1%;">COLUMN C<br />COLUMN C<br />COLUMN C<br />COLUMN C</div>
<br />
</div>
<br />
</div>
<br />
<br />
<br /><br /><br /><br />THIS SOLUTION ONLY WORKS IN FIREFOX AND CHROME (NOTICE THE RIGHT TS [not on the same line])<br />
<hr />
<div id="divCoursePlayer" style="text-align: center; vertical-align: top;">
<div id="divCourseScormTsLeft" style="float: left; text-align: left; vertical-align: top;display: inline;">
Left TS</div>
<div id="divCourseScormContent" style="float: none; text-align: center; vertical-align: top;display: inline;" class="CourseContent">
Content Display</div>
<div id="divCourseScormTsRight" style="float: right; text-align: left; vertical-align: top;display: inline;">
Right TS</div>
</div>
</center></body></html>
SEARCH ENGINE reference:
DIV tags in ie8 do not align correct
the css style float attribute left / right none does not work
Manipulating the Horizontal alignment and dividing into 3 columns does not work with div tags correctly
firefox behaves the way I anticipated with the div tag alignments
div tag alignment Internet explorer 3 columns
Center 3 div tags horizontally on a html page
Removing the DOCTYPE declaration will make it work. I don't know why, and it may cause other issues, but it will fix it.
div tag float none DOCTYPE declaration
3 column page layout using div tags
centering 3 div tags on a html page
page layouts using div tags to resemble table formatting
3 column table formatting using div tags
using div tags to align 3 colums similar to the way html table tags do
centering three columns using div tags
using percentages with html div tags
div tags do not center properly
Why do div tags not work for alignment the way tables do
div tag problems with centering columns
left justification of div tags
right justify div tags
how to have mutiple columns using div tags
div tag alignment consistency across multiple browsers
div tags really are not good for alignment we should stay with html tables
div tags should not be used as container items
Differences using div tags in the different browser versions