PDA

View Full Version : CSS/DIV: 2 x floated Div's inside parent Div: Firefox issue



alpine26
Nov 13th, 2006, 03:18 PM
Hi guys

I'm having problem developing a bog standard two column layout using Divs and CSS.

I'm trying to use float:left to position two divs side by side, inside a parent div. Everything's fine in IE but the inner floated divs appear outside of the flow at the bottom of the parent div under all the decent browsers.

Can anyone suggest a fix or an alternative approach? I want to get away from tables for this!

Cheers

ronaldb66
Nov 13th, 2006, 03:42 PM
This is standard-compliant behaviour: an element will collapse to encase any non-floated content. You could overcome this by clearing the floats (http://www.positioniseverything.net/easyclearing.html), or by floating the containing element itself.

alpine26
Nov 13th, 2006, 04:51 PM
Cheers Ronald I will give that a try.

alpine26
Nov 14th, 2006, 02:02 PM
This is standard-compliant behaviour: an element will collapse to encase any non-floated content. You could overcome this by clearing the floats (http://www.positioniseverything.net/easyclearing.html), or by floating the containing element itself.

I've floated the parent container to the left Ronald, and it works a treat! Thanks!

Only question now is, though: Does this approach have an adverse effect on any other browsers? Such as Safari? or Opera?

_Aerospace_Eng_
Nov 14th, 2006, 04:15 PM
I don't think you read that article too well. Floating the container usually isn't the best method as it can cause other problems. Reread that article carefully.