...

View Full Version : Floating DIVs problem



The Ace
05-10-2006, 03:25 AM
Hey guys,
I have two DIV ags inside a parent DIV,
Something like that:


<div id="Container" style="border:1px solid black;">
<div id="Left" style="display:block; float:left">Some text here</div>
<div id="Right" style="display:block; float:right">Some text here as well</div>
</div>

If The result is the Left and the Right DIVs are not in the parent div, and the border runs over (actually under) the text of the child DIVs.

if it makes any diffrence, the child DIVs have some padding and margin values.

I've attached an image that will hopefully explain the problem better then my words :)

Thanks for the help guys.

Arbitrator
05-10-2006, 03:42 AM
I don't understand this either or what the problem is called, but I solved it by putting content below the floated divisions. Namely, a 1 pixel tall image.

drhowarddrfine
05-10-2006, 03:50 AM
Performing as expected. You can try adding overflow:auto; to your parent div. Also, google for "clear floats" for more info.

The floated divs are removed from the normal flow causing the parent to collapse. IE has a bug which causes it to enclose the divs but this is incorrect behavior. Just be aware of it.

The Ace
05-10-2006, 03:54 AM
I don't understand this either or what the problem is called, but I solved it by putting content below the floated divisions. Namely, a 1 pixel tall image.
Not working :(
The text\image appears on top or below my child DIVs.

frustradet... :\

The Ace
05-10-2006, 03:56 AM
Performing as expected. You can try adding overflow:auto; to your parent div. Also, google for "clear floats" for more info.

The floated divs are removed from the normal flow causing the parent to collapse. IE has a bug which causes it to enclose the divs but this is incorrect behavior. Just be aware of it.
Yippie! Works! :P
Thanks!
that did the trick like magic! :)

Best regards mate,
Eli

The Ace
05-10-2006, 03:59 AM
Yippie! Works! :P
Thanks!
that did the trick like magic! :)

Best regards mate,
Eli
It works great, in FF, in IE still the same...
Ahhhhhhhhhhhh...

Any ideas?

CrAzY_J
05-10-2006, 04:02 AM
#Container{
display:table;
}

The Ace
05-10-2006, 04:05 AM
Yeap, answering my own question with a little help from google (and drhowarddrfine who told me to google in the frst place :)).

this is the code I used to "clear" my floats:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

taken from here: http://positioniseverything.net/easyclearing.html
nice article as well :)

tahnks guys for the help

The Ace
05-10-2006, 04:06 AM
#Container{
display:table;
}
Isn't display:table; ignored by IE? as far as I know it does...
If it's not, then I can use the property display:table-row/cell etc'?

CrAzY_J
05-10-2006, 04:15 AM
Isn't display:table; ignored by IE? as far as I know it does...
If it's not, then I can use the property display:table-row/cell etc'?

just add a width.

http://garyblue.port5.com/webdev/floatdemo.html

have fun

The Ace
05-10-2006, 04:21 AM
just add a width.

http://garyblue.port5.com/webdev/floatdemo.html

have fun
IE says nooooooooo
4495
see?
in FF it looks perfect, but not in IE :\

Arbitrator
05-10-2006, 04:23 AM
Yeap, answering my own question with a little help from google (and drhowarddrfine who told me to google in the frst place :)).

[...]

taken from here: http://positioniseverything.net/easyclearing.html
nice article as well :)

tahnks guys for the helpAh, I remember reading that article awhile back. I had no use for it at the time so I forgot about it though.

CrAzY_J
05-10-2006, 04:42 AM
IE says nooooooooo
4495
see?
in FF it looks perfect, but not in IE :\

just add a width.

You just need to add some width to the div and it will work fine.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum