By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Combining 100% width tables with float

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.