473,289 Members | 1,810 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Layout in IE6 (width and floating problems)

Hey, I need a solution to two problems:

#1
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?

#2
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
clarity.

#wrapper{
width: 800px;
background-color: #FFF;
margin: 0px auto;
}
#main{
width: 100%;
margin: 0px;
overflow: hidden;
}
#header{
background-color: #BBB;
margin: 0px;
padding: 0px;
border: 0px solid black;
}
#block_1{
margin-left: 160px;
margin-right: 160px;
background-color: #EEE;
}
#block_2{
float: left;
width: 150px;
background-color: #DDD;
}
#block_3{
float: right;
width: 150px;
background-color: #DDD;
}
#footer{
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>
<div id="main">
<div id="block_2">
<h2>Block 2</h2>
Add Lorem Ipsum here
</div>
<div id="block_3">
<h2>Block 3</h2>
Making<br />this<br />column<br />longer<br />than<br />the<br
/>center<br />column
</div>
<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
off.</td></tr></table>
</div>
</div><!-- end main -->
<div id="footer">
Footer text
</div>
</div><!-- close div #wrapper -->
I hope my questions make sense, and that someone would be kind enough
to give me some advice.

regards,
Christian Jansen

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

#1
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.

#2
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
column:

<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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
30
by: Diane Wilson | last post by:
I'm trying (once again) to figure out how to make a robust CSS layout style that can replace tables. I'd like to be able to do a basic two-column layout, with a one-column header, a two column...
9
by: WeshaTheLeopard | last post by:
Hi all, I have to admit that I'm completely at loss trying to implement the following layout: +-----------document---------+ | | | +--box1---+ +--box2---+ |...
7
by: Andrew | last post by:
I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work,...
3
by: ckirchho | last post by:
Halo, I am trying to realize a two column layout basically like this: <html> <head> <style> leftCol { float: left; width: 15em; }
9
by: Xavier van Unen | last post by:
Hi guys and gals, I'm working on a 2 column CSS layout (for an ordering system) in which it isn't a priori known which of the two columns will be the longest, that depends on the (script...
5
by: Mr Brown | last post by:
Hi, I have a div <div class="lrgBG">, followed by a footer div <div class="lrgFooter">. I have an image and a table in the lrgBG div, image is floating left and the table is floating right. the...
26
by: mark | last post by:
The idea of this is very simle. The site is 800px wide and sits in the middle of the browser window, on either side of the site I want a different background image aligned against it. If I were...
2
by: ottawamom | last post by:
Hi there, simply.amandadevries.com/index.html The page validates fine. Yes I know I'm using a table where I shouldn't but I can't otherwise figure out how to get my little image for the list...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

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.