Float drop in IE6 when box expands
I have a page with a 2 column layout.. on the left is the navpanel div and on the right is the datapanel div..the datapanel div has a table as its content. If I put navpanel's width as 18% and datapanel as 75%, then the page looks just fine in FF or IE7 if the datapanel cannot hold the full table ( in FF and IE7, the table just flows out of the box) but in IE6 the datapanel div expands and causes it to drop below the navpanel. Is there any way to fix this? I've looked and looked using Google search but no go! I can have the navpanel in % or pixel and don't need the datapanel to have a % if necessary but cannot have them in a container that's a fixed pixel width ( currently I have it in a container where width = 100%)
I just need a solution that works with the float not dropping at all.. thank you!
Do you possible have a link so we can see exactly what you are talking about and so we can see the code as well?
"Hippies.They're everywhere. They wanna save the earth, but all they do is smoke pot and smell bad."-Cartman
thanks for the reply.. yes, here is a link to the page --
I put a red box around the navpanel and a blue box around the datapanel. Our application has some web pages that show a lot of data and so I created a table with a lot of data as an example. Our client would like the browser horizontal scrollbar to show up ( like it does now) but no scrollbar in the data panel itself.. even though overflow:auto in datapanel gets rid of the float drop but gives a scrollbar in that panel.
I'm stumped on this one! Thanks so much!!!
I really don't think there is a 'good' answer to this bug. You just have to find an acceptable workaround.
You can, I believe, add overflow:scroll to the datapanel div and that avoids the problem, but then you get a table (in this case) that the user can't see all at once (has to scroll to see part of it).
Another 'workaround' might be using a 'lightbox' solution, where you might put a small image representing the table in the actual page, and have a 'click to enlarge' button that opens a lightbox window which would basically free you from the constraints of the structure of the main page (lightbox wouldn't have the nav column).
I think the problem comes from the fact that ie6, despite a div having a rigid width, ends up just expanding the div beyond that rigid width if the content is wider than the div. What it should do....what other browsers do, is just let the content overflow the the side of the div (in the absence of some other overflow property setting). The end result is that ie expands the div and then you end up with two divs that are two wide to fit on the same level, so the second one gets pushed down.
I may be wrong. There may be a solution I just haven't run across in my somewhat cursory research at this point, but I have the same issue that I'm going to need to address at some point so I have at least done a LITTLE research to this point...
Please, anyone, correct me if I'm wrong.
Thanks for the reply cfh! Yeah, I tried overflow:auto on the datapanel and it got rid of the float drop issue but it gives scrollbars in the datapanel.. I actually put up a page on our production server that had this type of layout and I got some immediate negative feedback since the enduser had to scroll all the way down in the page to see the scrollbar (this table had many rows).
Thanks for the lightbox tip.. not sure if that would work for this particular client either since they want to see their data right away ( they say that less keystrokes are better)
Currently, we have a system where the web pages are done in tables.. I know for sure that this scrollbar problem doesn't exist with that kind of layout but I was really hoping for the structure of the page to be done in divs, etc..
Btw, I found these 2 articles --
(useful if your using pixels and have a fixed width)
Float problems in IE :
Let me know if you find any other solution for this frustrating problem.. thanks!!
Also, I thought I would try to remove the width from maincontent and datapanel so that there are no width constraints but the navpanel and datapanel stack on top of each other when I try this --
ok, i found somewhat of a solution for the drop problem..
I removed 'float: left' from datapanel and added 'position: absolute;' and 'left: 18%'
Here's what I get --
Not sure why I'm getting the vertical scrollbar in IE though...?
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)