CSS Difficult Column List Problem Why?
2007-11-14 03:54
Given the following html, use CSS to put the two DIVs in side-by-side columns such that the ordered lists are identical and are properly indented.
Browser compatibility requirements:
IE7
IE6
Firefox 2
Opera 9
The DIV for column 1 is styled inline with a border to increase the difficulty. The second column's contents shouldn't appear within the first column.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style>
</style>
</head>
<body>
<div id="left_col" style="border: solid thin;">
Ordered List
<ol>
<li>Item 1
<ol>
<li>Subitem 1
<ol>
<li>Sub-subitem 1</li>
</ol>
</li>
<li>Subitem 2</li>
</ol>
</li>
<li>Item 2</li>
</ol>
</div>
<div id="right_col">
Ordered List
<ol>
<li>Item 1
<ol>
<li>Subitem 1
<ol>
<li>Sub-subitem 1</li>
</ol>
</li>
<li>Subitem 2</li>
</ol>
</li>
<li>Item 2</li>
</ol>
</div>
</body>
</html>