Please help, problem in firefox...

Discussion in 'CSS' started by itsall3, Jan 9, 2007.

0
  1. #1
    Hi guys, i've got this problem.

    I have 4 divs, one holds the other 3.

    In internet explorer i get what i want, the div holding the other 3, stretchs to the length of the longest div. The problem is, in firefox, the holding div, does not stretch down. it just disapears.


    Any one have any idea???

    [​IMG]



    <style type="text/css">
<!--

body {
	margin:0;
	text-align: center; /* for IE */
}

#Holder {
	background-color: #FF0000;
	width: 800px;
	position: relative;
	margin: 0 auto;   /* align for good browsers */
	text-align: left; /* counter the body center */
}
#box1 {
	background-color: #00FF00;
	width: 140px;
	float: left;
	height: 200px;
}
#box3 {
	background-color: #00FFFF;
	width: 140px;
	float: left;
	height: 20px;
}
#box2 {
	background-color: #99CC00;
	width: 520px;
	float: left;
	height: 20px;
}
-->
</style>
</head>

<body>

<div id="Holder">
<div id="box1">
  <p>&nbsp;</p>
  </div>
<div id="box2"></div>
<div id="box3"></div>
</div>
    Code (markup):


    Thanks very much.

    Cheers.
     
    itsall3, Jan 9, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    IE gives you what you want because it's a buggy PoS. Firefox is rendering correctly according to your code. You haven't enclosed your float elements.

    cheers,

    gary
     
    kk5st, Jan 9, 2007 IP
    itsall3 likes this.
  3. itsall3

    itsall3 Active Member

    Messages:
    505
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Thanks for the help man, that sorted my problem! :)

    Rep added.

    Cheers

    (now if i could just solve this damn IE Z-index problem i'd be sorted! ;) )
     
    itsall3, Jan 10, 2007 IP