469,286 Members | 2,442 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,286 developers. It's quick & easy.

Replicating a table in IE, whats the best solution?

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">mainNav</div>

<div id="subNav">subNav</div>

<div id="content">content</div>

<div id="footer">footer</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

Jan 19 '06 #1
2 1248
bi******@yahoo.co.uk wrote:
width: 800px;
Wrong approach. You're making the page very difficult to use in a
reasonably-sized browser window (including a maximized window on many
devices). Design for any resolution instead.
background: #000;
Wrong approach. Never set one color without setting other colors (here,
text color and link colors).
display: table-cell;
Poorly supported, as you have noticed.
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.
Simply leave the widths unspecified, defaulting them to auto (=
available width), except - in your case - 'subNav', for which you could
set the width using the em unit, together with float: left.
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.


What's your best attempt with float? There are problems in that approach
as well, but the solutions depend on the page as a whole.
Jan 19 '06 #2
Any resolution, no probs. Ill get to that later.

Is there a reason that I need to specify every element? I have noticed
that CSS validators do frown upon not specifying every color. Not
looked too much into it though.

For my best attempt with float, I get good results in IE but a slight
glitch in FF. There seems to be no padding on the content div before
the text appears.

http://www.martynbissett.co.uk/_test.../test_div5.php

When I remove the color from subNav it appears that the content div is
sitting underneath the subNav div.

http://www.martynbissett.co.uk/_test.../test_div6.php

Hope these links help and you can tell me if Im going about this the
proper way. Thanks

Burnsy

Jan 19 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by imani_technology_spam | last post: by
reply views Thread by nwiebe | last post: by
5 posts views Thread by Derickson | last post: by
3 posts views Thread by jodyblau | last post: by
5 posts views Thread by Radek | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.