By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,650 Members | 1,778 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,650 IT Pros & Developers. It's quick & easy.

Expansion of box using div -- please help

P: 7
Hi All

I have a box with shadow around it. Now i have to render a red bar inside it at the top. This red bar should expand when the box expands but this is not happening in mozilla.

Here is the code which I am using--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

.box{
float: left;
width: auto;
height: auto;
}
#boxContent{border: 1px solid #999999;background: #ffffff;
}
#boxContent{
position: relative;
height:auto;
right: 3px;
bottom: 3px;

}
#boxContainer{
position: relative;
background: #dddddd;
margin: 1px;
top:2px;
height: auto;
width: 703px;
}

html, body {
margin-left:30px;
margin-top:15px;
}

* html .box{
float: left; width: auto;
}

* html #boxContainer{
position: relative;
background: #dddddd;
margin: 1px;
height: auto;
width: 703px;
}

#boxContainer #red_bar{
float: right;
height: 9px;
width: 100%;
border: 0;
background: transparent url(imgs/red_bar.jpg) repeat-x 0 0px;
padding: 0px;
}

<body>
<div class="box" id="boxContainer">
<div class="box" id="boxContent">

<div id="red_bar"></div>

</div>
</div>
</body>

Can anyone of you provide a solution.

Thanks in advance

Thanks&Regards
ABhishek11
Nov 1 '06 #1
Share this Question
Share on Google+
2 Replies


Expert 100+
P: 1,892
Have you tried overflow: auto?
Nov 1 '06 #2

drhowarddrfine
Expert 5K+
P: 7,435
As AricC pointed out, this is a bug in IE and Mozilla is performing correctly. Divs are NOT to expand to enclose floated elements. Always design using ANY other browser but IE to avoid these time wasting errors on IEs part.
Nov 1 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.