RE: [WSG] Right div dropping below left floated div when browser resized
> The problem is that when the browser window is reduced in
> size, to the point that the table can no longer shrink to fit
> inside the available space, the table (but not the whole
> right div) drops down so that the top of the table is in line
> with the bottom of the left navigation div. This problem
> occurs in IE6 but not IE7 or Firefox.
Hi Stevio,
I think the trick is to take the table out of the normal flow by floating it
if it is in IE6. Then wrap the table with a positioned relative div that
takes close to the full width of the right container. This keeps text below
from creeping up the side.
Here is a test page I created that seems to do what you want:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en">
Example
body {
border: solid red 1px;
}
#navigation {
float: left;
width: 180px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 9px;
margin-right: 0px;
padding-left: 1px;
padding-right: 1px;
background: #FF;
border-top: 2px solid #336699;
border-bottom: 2px solid #336699;
}
#mainbody {
position: relative;
margin-left: 210px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 0;
border: solid black 1px;
}
#mainbody h2 {
margin: 0;
padding: 0;
background-color: #0f0;
}
.tablelist {
position: relative;
overflow: hidden;
width: 100%;
_width: 95%; /* may have to play with this value */
}
.tablelist table {
_float: left;
margin: 0;
padding: 0;
background-color: #ff0;
}
Home
About
News
My List
Col 1Col 2Col 3
123
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***BEGIN:VCARD
VERSION:2.1
N:Gelotte;Kepler;;Mr.
FN:Kepler Gelotte (kep...@neighborwebmaster.com)
ORG:Neighbor Webmaster
TITLE:Web Designer
TEL;WORK;VOICE:(732) 302-0904
TEL;WORK;FAX:(732) 302-0904
ADR;WORK:;;156 Normandy Dr;Piscataway;NJ;08854;United States of America
LABEL;WORK;ENCODING=QUOTED-PRINTABLE:156 Normandy Dr=0D=0APiscataway, NJ 08854=0D=0AUnited States of America
URL;WORK:http://www.neighborwebmaster.com
EMAIL;PREF;INTERNET:kep...@neighborwebmaster.com
REV:20070415T052107Z
END:VCARD
Re: [WSG] Right div dropping below left floated div when browser resized
Thanks Joseph, but I don't know the width however. The right width column
varies according to the width of the browser and it's content.
Stephen
- Original Message -
From: Joseph Taylor
To: wsg@webstandardsgroup.org
Sent: Tuesday, June 30, 2009 10:00 PM
Subject: Re: [WSG] Right div dropping below left floated div when browser
resized
IE6 will drop your content down to a place where it'll fit.
You need to do something like this:
my_container {
min-width: XXpx;
_width: XXpx; /* just for IE6 */
}
IE6 needs specified width and then it'll behave like it was given a min-width.
Joseph R. B. Taylor
Designer / Developer
--
Sites by Joe, LLC
"Clean, Simple and Elegant Web Design"
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com
On 6/30/09 4:42 PM, Stevio wrote:
I have two divs as follows (no link sorry, web page is protected) - a left
div for navigation, a right div containing a header and table (with tabular
data).
The problem is that when the browser window is reduced in size, to the
point that the table can no longer shrink to fit inside the available space,
the table (but not the whole right div) drops down so that the top of the table
is in line with the bottom of the left navigation div. This problem occurs in
IE6 but not IE7 or Firefox.
Any ideas how I can fix this so the table just stays in place like it
should when the horizontal scrollbar appears?
Code is below. Thanks.
--content--
My List
--table content--
CSS is:
#navigation {
float: left;
width: 180px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 9px;
margin-right: 9px;
padding-left: 1px;
padding-right: 1px;
background: #FF;
border-top: 2px solid #336699;
border-bottom: 2px solid #336699;
}
#mainbody {
margin-left: 210px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
border: 0px solid black;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Right div dropping below left floated div when browser resized
IE6 will drop your content down to a place where it'll fit.
You need to do something like this:
my_container {
min-width: XXpx;
_width: XXpx; /* just for IE6 */
}
IE6 needs specified width and then it'll behave like it was given a
min-width.
Joseph R. B. Taylor
/Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com
On 6/30/09 4:42 PM, Stevio wrote:
I have two divs as follows (no link sorry, web page is protected) - a
left div for navigation, a right div containing a header and table
(with tabular data).
The problem is that when the browser window is reduced in size, to the
point that the table can no longer shrink to fit inside the available
space, the table (but not the whole right div) drops down so that the
top of the table is in line with the bottom of the left navigation
div. This problem occurs in IE6 but not IE7 or Firefox.
Any ideas how I can fix this so the table just stays in place like it
should when the horizontal scrollbar appears?
Code is below. Thanks.
--content--
My List
--table content--
CSS is:
#navigation {
float: left;
width: 180px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 9px;
margin-right: 9px;
padding-left: 1px;
padding-right: 1px;
background: #FF;
border-top: 2px solid #336699;
border-bottom: 2px solid #336699;
}
#mainbody {
margin-left: 210px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
border: 0px solid black;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Right div dropping below left floated div when browser resized
I have two divs as follows (no link sorry, web page is protected) - a left
div for navigation, a right div containing a header and table (with tabular
data).
The problem is that when the browser window is reduced in size, to the point
that the table can no longer shrink to fit inside the available space, the
table (but not the whole right div) drops down so that the top of the table
is in line with the bottom of the left navigation div. This problem occurs
in IE6 but not IE7 or Firefox.
Any ideas how I can fix this so the table just stays in place like it should
when the horizontal scrollbar appears?
Code is below. Thanks.
--content--
My List
--table content--
CSS is:
#navigation {
float: left;
width: 180px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 9px;
margin-right: 9px;
padding-left: 1px;
padding-right: 1px;
background: #FF;
border-top: 2px solid #336699;
border-bottom: 2px solid #336699;
}
#mainbody {
margin-left: 210px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
border: 0px solid black;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
