Forum Moderators: not2easy

Message Too Old, No Replies

Two <div> Elements in Container Element

Works fine in IE but breaks with Firefox

         

Optimi

1:30 pm on Mar 31, 2008 (gmt 0)

10+ Year Member



Hello guys

I was wondering if someone here has ran into sam problem as I have.

In my CSS file I have defined a container element and In my HTML I place further two elements into the container. They are supposed to be side by side and container is wider than the two together.

It functions ok in IE. I validated the code at w3 an html and css both came out acceptable.

For some reason Firefox shows the content of the two elements below container element.

I have no web programming experience prior to this project and I was pretty happy with the way IE rendered my site but theb I found out about Firefox problem.

I'd really appreciate some tips how to proceed.
Thanks in advance!

Optimi

2:56 pm on Mar 31, 2008 (gmt 0)

10+ Year Member



update so far... It seemed to be problem with "float" command.
Site looks decent but I'd like to place those 2 elements side by side. How to do it without float?

I was under impression that float would be legitime command though.

Any feedback is still more than welcome

BKahuna

6:44 am on Apr 1, 2008 (gmt 0)

10+ Year Member



I think you should be able to use float. You just have to add

clear:both;

to the block following your container. I've also had luck adding

overflow:both;

to the container object.

I hope one of these (or both) works.

BK

[edited by: BKahuna at 6:45 am (utc) on April 1, 2008]

Dave75

4:54 pm on Apr 2, 2008 (gmt 0)

10+ Year Member



You will need to post your code. I suspect your child boxes are wider than your container box. But can't be sure unless I see your code.

I have no web programming experience prior to this project and I was pretty happy with the way IE rendered my site but theb I found out about Firefox problem.

It's almost always a problem with IE, you should develop in FF then, add IE hacks.

Optimi

4:38 am on Apr 3, 2008 (gmt 0)

10+ Year Member



Bkahuna, Many thanks! Clear: both; did the trick.

BKahuna

4:40 am on Apr 3, 2008 (gmt 0)

10+ Year Member



I'm glad - I made a mistake in my post anyway. It should have been:

overflow:auto;

Anyway, Dave is right - FireFox is a standards compliant browser. IE has lots of bugs in with floats and does many thing it's not supposed to. It will seem helpful until you realize FF won't render it because your CSS isn't really right.

BK