I am making css design,
but i have a strange problem with CSS
the design has 3 divs aligned horizontally with float:left
now when i put a options in select box in some child div of the middle div
the third div slides down.

here is how it looks with options in select box >> with select options

the page without options in select box is>>> without select options

can anyone please tell me why its happening?

They both look virtually the same to me, did you change something ?

they look the same in IE but in Firefox 1.5.0.6 they looks different,
the first page shows both blue divs in one column,
the second page shows both blue divs on left and right end of page( which is perfect ).

I don't use IE.. except to test. I use FF and do have the 1.5.0.6 update.
On both pages I see a blue area on each side of the green form box.

The page has errors in the HTML, clean them up first.
and.. you have a serious case of div-itis.. you rarely need a <div> for every single element on a page.

hi,
i have validated the code,
well and i also removed a lot of irrelevant coding from it, so it will be easy for you ppl to read,

also i have the image of the problem >>>


the image of view without the options in selectbox is as below


i think this will xplain the well.

Ok.. I see only in your image. When I go to the page with FF, there is nothing in the options box, on either example, therefore I don't see the problem.

hi,
please checkout now,
i submitted a bug report on mozilla so i was changing the files.
Untitled Document

i have set the option as 'test'

i have removed a lot of coding
so its more easier to spot the problem,

I have the same problem pushing a div to the bottom too when I have select boxes there/populated.

The divs are floated.

If you can help us all out that would be great!

i had reported the bug to FireFox team,
but they just said it will be fixed in next version.

Cool! Thank you!

I have been playing about but if you add the size attribute to the select box it seems fine

eg

<select size="2">
<option>Option</option>
<option>Option</option>
</select>

also if you do position: absolute; in the css on a normal select box it does some crazy things.

yeh,

it has problem only when size="1"
it works well for other sizes.
but looks wierd.

-sameer

I took out the display:compact, and div #3 pops back up where it blongs and the select box extends down where you'd want it. FF apparently doesn't like display:compact, I'll have to research that.