473,703 Members | 2,766 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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%"ins ide 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%"><t r><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 2726
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><t d[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

by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | | | | | | | | left | center | right | | | | | | | | |
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 body, and a two-column footer. The problem, and one that always sends me back to using tables, is that word "robust." Absolute positioning gets squirrelly, because it takes the positioned elements completely out of the float scheme, and stuff...
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---+ | | | A | | A | |
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, primarily due to the footer not being aware of the columns due to me floating / positioning them. I have the following (very simple) markup: <div id="head">...</div> <div id="left">...</div>
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; }
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 generated) content. As there is also a following footer DIV, the usual floating one of the DIVs technique doesn't give the desired results, and has the floated DIV (if it is the longest one) being displayed/rendered through the footer DIV. I...
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 problem is, which you can see below is that in firefox the lrgBG div doesn't seem to be holding the IMG & Table, and not expanding to the height of them. this is what i need help with please. Looks correct in IE allthough CSS is wrong...
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 doing this with table based layout the code would be as follows: <head> <style type="text/css"> #bgleft { background: url(left_half_circle.gif) right top repeat-y;
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 items in the div headlines to line up with the corresponding questions, and with a little space between. If you feel like answering this, great! Otherwise, read on for the reason for my post:
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.