469,270 Members | 1,772 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Combining 100% width tables with float

Okay, this is driving me nuts, and while I'm still researching, I'm
hoping someone here can help.

I'm trying to create a simple page with a navigation menu on the left
side of the main content area. On the right side, I have a content
div that contains an h1 title and a table that I'd like to take up the
full width of the div (but not, of course, run over the navigation
menu).

So I try something like this in my CSS:

#navbar {
float: left;
width: 10em;
}

#content {
margin-left: 11em;
}

And in my HTML, I'll have something like this:

<div id="navbar">This is a test...</div>
<div id="content">
<h1>Test Page</h1>
<table style="width: 100%;">
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>Datum 1</td><td>Datum 2</td></tr>
</table>
</div>

In Firefox, this works great. The table takes up the full width of
the content div and appears immediately under the heading, which is
what I want.

However, in Internet Explorer 6, the heading works, and the top of the
title is aligned with the top of the navbar. If I put text in p tags
under the heading, it all lines up nicely. But the table is acting
like it has a clear:left; style specification, which it doesn't. I've
even tried explicitly setting clear:none; to no avail. It's being
rendered so that the top of the table aligns a pixel under the bottom
of the navbar.

I know that IE has lots of little CSS bugs that drive people nuts, but
I can't find what's causing this particular one or how to fix it. I'd
love to change our corporate standard to Firefox, but unfortunately,
that's just not an option.

Anyone have any clues what's going on here and how to coax IE 6 into
rendering the table immediately under the title like it's supposed
to? I'm forcing strict mode (not quirks mode) by using the following
doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Any help is appreciated!

Mar 12 '07 #1
2 2744
I've posted an HTML page with css styles in it to show the problem I'm
having. It's here:

http://skippus.com/iecss/iecss.html

Again, any help that anyone can give would be greatly appreciated.

Mar 13 '07 #2
TonyV wrote:
I've posted an HTML page with css styles in it to show the problem I'm
having. It's here:

http://skippus.com/iecss/iecss.html

Again, any help that anyone can give would be greatly appreciated.
table {
border: 1px solid blue; width: 99%;

<!-- I want the table to fill the containing div --DELETE line

/* but IE has 100% problems, oversets and clears it down,
so the answer is to use 99% or 99.5%

Use the HTML "comments" only in HTML and
use CSS "comments", as here, in CSS */
}

--
Gus
Mar 13 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by patrick h. | last post: by
reply views Thread by Paul E Collins | last post: by
17 posts views Thread by Mike | last post: by
11 posts views Thread by yawnmoth | last post: by
1 post views Thread by slinky | last post: by
1 post views Thread by adamjblakey | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.