471,591 Members | 1,855 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,591 software developers and data experts.

Layout in IE6 (width and floating problems)

Hey, I need a solution to two problems:

I use a three column layout, where the right and left columns are 150px
wide and floated. The center column is not floated, with margins 150px
on each side to place it between the other two.

I use padding: bigval; and margin: -bigval; (together with overflow:
hidden; on the container) to make the three columns look equally long.
But because the center column is not floated (and I don't want it to
be), IE6 cut the right and left columns where the center column ends.
Is it possible to have IE handle the overflow as if the middle column
also were floated?

Now, if I have a <table width="100%"inside the center column, in most
browsers (i guess) this table would be contained within the center
column, and will behave just like any other element (e.g. text).

However, in IE6 this is not the case. The width percentage will not
refer to the content area of the center column, and the table will be
placed (ceteris paribus) underneath the center column.

For practical reasons (limitations to the CMS I'm using) I _need_ to
have a table with width=100% inside this center column. And I would
like those 100% to refer to the content area of the center column (as
in e.g. Firefox). So, how can I make this happen?
Here is some relevant css/html in case my above explanation lacks

width: 800px;
background-color: #FFF;
margin: 0px auto;
width: 100%;
margin: 0px;
overflow: hidden;
background-color: #BBB;
margin: 0px;
padding: 0px;
border: 0px solid black;
margin-left: 160px;
margin-right: 160px;
background-color: #EEE;
float: left;
width: 150px;
background-color: #DDD;
float: right;
width: 150px;
background-color: #DDD;
height: 40px;
background-color: #AAA;
width: 100%;
#block_1, #block_2, #block_3{
padding-bottom: 30020px;
margin-bottom: -30000px;
<div id="wrapper">
<div id="header">
<h1>Equal Height Columns</h1>
<div id="main">
<div id="block_2">
<h2>Block 2</h2>
Add Lorem Ipsum here
<div id="block_3">
<h2>Block 3</h2>
Making<br />this<br />column<br />longer<br />than<br />the<br
/>center<br />column
<div id="block_1">
<h2>Block 1</h2>
Make one of the side columns longer than this one, and view in
<table width="100%"><tr><td>This is the table I'm talking about.
Try removing it and look see how the right column gets cut
</div><!-- end main -->
<div id="footer">
Footer text
</div><!-- close div #wrapper -->
I hope my questions make sense, and that someone would be kind enough
to give me some advice.

Christian Jansen

Aug 8 '06 #1
1 2633
I found a solution myself, and I post it here for future reference. I
hope someone else might find it useful.

I had to resort to faux columns to make the columns appear equally
long. The method of big positive padding and big negative margin did
not work (in IE6) if not all three columns were floated.

I use Joomla for CMS, and sometimes the modules of Joomla use tables
with 100% width, which turned out to be incompatible with my layout
(i.e. in IE6; it worked just fine in FF). All I had to do to fix this
problem was simply adding another table around the content of my center

<table><tr><td[Joomla content] </td></tr></table>

This trick makes IE6 behave as if 100% width, in nested tables, refers
to the margins of the center column. Not very pretty, but it works.

- Christian Jansen

Aug 11 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

30 posts views Thread by Diane Wilson | last post: by
9 posts views Thread by WeshaTheLeopard | last post: by
9 posts views Thread by Xavier van Unen | last post: by
2 posts views Thread by ottawamom | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.