Hi,
I have an HTML structure where each page area is a <div> and identifies
with a unique 'id'. Below is the code:
<html>
<head>
<style>
#wrap {
margin: 0 auto;
width: 800px;
background: #000;
}
#logo {
background: #f00;
padding: 5px;
}
#mainNav {
background: #0f0;
padding: 5px;
}
#subNav {
background: #00f;
padding: 5px;
width: 200px;
display: table-cell;
}
#content {
background: #0ff;
padding: 5px;
width: 590px;
display: table-cell;
}
#footer {
background: #f0f;
padding: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="logo">logo </div>
<div id="mainNav">ma inNav</div>
<div id="subNav">sub Nav</div>
<div id="content">co ntent</div>
<div id="footer">foo ter</div>
</div>
</body>
</html>
Aslo found at -
http://www.martynbissett.co.uk/_test.../test_div3.php (works in FF
but not IE)
Please note, the div's 'logo', 'mainNav' and 'footer' I am happy with
the default 'block' for display. However, 'subNav' and 'content' I
would like to display as two columns side by side. This works fine in
Firefox but not in IE. Reading through this newsgroup I have come to
understand that IE's support of display: table* is practically non
existant.
I have tried various assortments of altering display, float and width
for subNav and content div's as well as wrapping the both within a
<div> but no results that I am confident will hold up in most
scenarios.
Can someone please direct me in the right way of creating columns using
CSS? Please explain in detail as I am currently beginning to look into
using CSS instead of tables for layout and yet have alot to learn.
Also, any additional tips / examples would be much appreciated.
Thanks
Burnsy
