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

CSS div problem - C for Catastrophe

P: 10
My HTML:
[HTML]<div style="position:relative;"><div id="mainbody">
<div class="containers">
<div class="tl"></div>
<div class="tm">Articles</div>
<div class="tr"></div>
</div>
<div class="containers">
<div class="ml"></div>
<div class="mm">1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div>
<div class="mr"></div>
</div>
<div class="containers">
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
</div>
</div></div>[/HTML]
My CSS:
Expand|Select|Wrap|Line Numbers
  1. #mainbody {
  2.     position:relative;
  3.     width:620px;
  4.     margin-left:20px;
  5.     margin-top:10px;
  6.     float:left;
  7. }
  8. #mainbody .containers {
  9.     position:relative;
  10. }
  11. #mainbody .containers .tl {
  12.     background:url(images/body_top_left.png) no-repeat;
  13.     margin:0;
  14.     padding:0;
  15.     width:24px;
  16.     height:24px;
  17.     float:left;
  18. }
  19. #mainbody .containers .tm {
  20.     background:url(images/body_top_midd.png) repeat-x;
  21.     margin:0;
  22.     padding:0;
  23.     width:572px;
  24.     height:21px;
  25.     float:left;
  26.     padding-top:3px;
  27.     font-family:Verdana, Arial, Helvetica, sans-serif;
  28.     color:#ffffff;
  29. }
  30. #mainbody .containers .tr {
  31.     background:url(images/body_top_righ.png) no-repeat;
  32.     margin:0;
  33.     padding:0;
  34.     width:24px;
  35.     height:24px;
  36.     float:left;
  37. }
  38. #mainbody .containers .ml {
  39.     background:url(images/body_mid_all.png) repeat-x #1c811c;
  40.     margin:0;
  41.     padding:0;
  42.     width:24px;
  43.     min-height:250px;
  44.     float:left;
  45. }
  46. #mainbody .containers .mm {
  47.     background:url(images/body_mid_all.png) repeat-x #1c811c;
  48.     margin:0;
  49.     padding:0;
  50.     width:571px;
  51.     min-height:250px;
  52.     float:left;
  53.     font-family:Verdana, Arial, Helvetica, sans-serif;
  54.     color:#ffffff;
  55. }
  56. #mainbody .containers .mr {
  57.     background:url(images/body_mid_all.png) repeat-x #1c811c;
  58.     margin:0;
  59.     padding:0;
  60.     width:24px;
  61.     min-height:250px;
  62.     float:left;
  63. }
  64. #mainbody .containers .bl {
  65.     background:url(images/body_bot_left.png) no-repeat;
  66.     margin:0;
  67.     padding:0;
  68.     width:23px;
  69.     height:23px;
  70.     float:left;
  71. }
  72. #mainbody .containers .bm {
  73.     background:url(images/body_bot_midd.png) repeat-x;
  74.     margin:0;
  75.     padding:0;
  76.     width:573px;
  77.     height:23px;
  78.     float:left;
  79. }
  80. #mainbody .containers .br {
  81.     background:url(images/body_bot_righ.png) no-repeat;
  82.     margin:0;
  83.     padding:0;
  84.     width:23px;
  85.     height:23px;
  86.     float:left;
  87. }
My Problem:
When the text in (div with a class of mm), currently 1<br />, goes outside the min-height it all gets mixed around. Example of error at mediafire Click Here to View
Jan 18 '08 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Which browser?
What doctype are you using?
Without the images, we can't duplicate this.

If the problem is in IE only, the problem may be min/max anything doesn't work in IE.
Jan 18 '08 #2

P: 10
Happens in Internet Explorer 7(7.0.5730.13) and Firefox 2(2.0.0.11)
XHTML 1.0 Strict
By images do you this:
[url=http://www.mediafire.com/imageview.php?quickkey=1eh2rkrn0xy&thumb=4]

Jan 19 '08 #3

P: 10
Rather than three in the middle i used one large one
Jan 19 '08 #4

drhowarddrfine
Expert 5K+
P: 7,435
You didn't solve the problem, you only used a different method. The solution is easy but we don't have the images you used; I didn't mean you needed to post the images of the problem which you already linked to.
Jan 19 '08 #5

Post your reply

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