Menu
Hello,
I made this very simple HTML representing a box with a title and a content layers within it. The idea is that the BOX itself will never have a fixed width so that it should expand as necesary depending on it’s content.
It is working on FIREFOX and SAFARI but it’s giving problems on IE7 and It’s getting very difficult to find a good solution
This is the XHTML code:
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd “>
<html xmlns=’http://www.w3.org/1999/xhtml’ xml:lang=’en’ lang=’en’>
<head>
<meta http-equiv=’Content-Type’ content=’text/html; charset=iso-8859-1′ />
<style>
#box {
border: 2px #000000 groove;
position:absolute;
top:30%;
left:30%;
}
#title {
width:100%;
background-color:#E0E0E0;
border-bottom:1px #000000 groove;
}
</style>
<body>
<div id=”box”>
<div id=”title”> Box title </div>
<div id=”content”> Box content goes here. The box itself and the tiele should adapt to the with of this DIV. </div>
</div>
</body>
</html>
The #box DIV has position:absolute and width:auto; so that it will expand depending on it’s content. This is working just fine.
The problem is that the #title DIV has width:100%, wich indicates that it may expand to the 100% of it’s container (#box), this works fine in most browsers but Internet Explorer 7 seems to get conffussed if the container has a width:auto value.
If I give a fixed value (like 200px or 30%) to #box DIV, then it will work. But I cannot do that, the content is dynamically changing almost all the time.
(NOTE: Theres a JavaScript fix to this but I would love to avoid it if possible).
Thanks so much for any help!
Ed