Log in

View Full Version : IE won't make change the width of a div


pman
06-12-2007, 01:44 AM
Hey guys,

I'm stumped with this wired problem and have no idea what's going on. Had a lot of issues with IE, but never had this kind of problem

If you just try the following html page in both IE and firefox, you'll see that everything is just fine. But if I try to make the width of the sidebarPanel div to "0",


#sidebarPanel
{
position: relative ;
height: 300px ;
width: 0px ;
border: 1px solid red ;

float: right ;
}

then IE doesn't do anything. Looks like it can't make the width any smaller than about 90px or so.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sidebar Width Problem</title>

<style title="default style" type="text/css">
#mainPanel
{
border: 1px solid #6699CC ;
position: relative ;
height: 100% ;
width: 300px ;
float: left ;
overflow: hidden ;
}

#sidebarPanel
{
position: relative ;
height: 300px ;
width: 350px ;
border: 1px solid red ;

float: right ;
}


#sidebarContent
{
position: relative ;
height: 100% ;
overflow: auto ;
margin-left: 6px ;
}
</style>

</head>

<body>

<div id="mainPanel">
<h1>Main content goes here</h1>
</div>
<div id="sidebarPanel">
<div id="sidebarContent">
<p>Examples

Return the length of a string
How to use the length property to find the length of a string.

Style strings
How to style strings.

The indexOf() method
How to use the indexOf() method to return the position of the first occurrence of a specified string value in a string.

The match() method
How to use the match() method to search for a specified string value within a string and return the string value if found

Replace characters in a string - replace()
How to use the replace() method to replace some characters with some other characters in a string.</p>
</div>
</div>


</body>
</html>


Do you guys know what's up with IE in this case? Thanks in advance for your help.
Veronica
06-12-2007, 03:22 PM
IE is making the minimum width of the div large enough to contain your smallest object (in this case, the word "occurrence") If you eliminate the content, the width will change in IE and FF.

If you wanted to make the panel 0 px regardless of content, add overflow: hidden ;


\#sidebarPanel
{
position: relative ;
height: 300px ;
width: 0px ;
border: 1px solid red ;
overflow: hidden ;
float: right ;
}
pman
06-13-2007, 01:08 AM
Hi Veronica,

Thanks so much for your reply. I just added half of the content frorm the sidebar panel to the main panel and then set the width of the main panel to 0px. That seems to be working fine in both IE and FF.

according to you, shouldn't it have done the same as the sidebar panel in IE; take the longest word and set the minimum width of the div to that?

Haven't tried the overflow value to "none", but that's not an option for me. I don't know the content size in the sidebar panel. that's why I set it to "auto" so that if there's more, the scroll bar will appear.
Veronica
06-13-2007, 01:16 PM
Your #mainpanel already has overflow:hidden according to your css. So in IE, any extra content won't force a scrollbar.

BTW, in your first post, you said you wanted to set the width to 0 in both IE and FF, and not show extra content. But, yes, if you now want it to show extra content, set it to auto.
pman
06-14-2007, 12:08 AM
Thanks. It's working now. Actually what I needed to do is that set the overflow value to auto for #sidebarpanel

Although #sidebarContent has overflow value set to auto and it was workin in both opera and firefox, it would work in IE. But now that I defined the overflow for the parent node as well, it's working in all of them. Thanks again