473,544 Members | 1,781 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:

#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%"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
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%"><t r><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 2720
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><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

82
10596
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | | | | | | | | left | center | right | | | |...
30
3090
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...
9
2384
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 | |
7
2606
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...
3
3054
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
1830
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...
5
4507
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...
26
2561
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)...
2
2941
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!...
0
7416
marktang
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...
0
7360
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7761
jinu1996
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...
1
7363
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...
0
7701
tracyyun
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...
0
3403
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...
1
1833
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
1
983
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
653
bsmnconsultancy
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...

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.