PDA

View Full Version : float within margin 0 auto



BubikolRamios
Jul 9th, 2010, 03:57 AM
Obviously need image of flag and text floated left within yellow box.

http://agrozoo.net/jsp/Galery_list_of_specieses.jsp?p1=500

And it turns out good in IE but not in FF and GC.
Any tip ?

skywalker2208
Jul 9th, 2010, 05:19 AM
Link doesn't work for me.

Keleth
Jul 9th, 2010, 06:42 AM
Any particular reason you float the text? If you want it to appear just right of the flag, give it a left margin.

Also, it doesn't work in IE, nor should it. As the container div has no height (floated content does not contribute to the height of a parent), it appears at its minimum height.

You can add something with a clear at the bottom (<br style="clear: both">) or give the text a left margin instead of floating it, and it'll work fine.

BubikolRamios
Jul 9th, 2010, 08:14 AM
It does work in IE 7.0 for me.



give it a left margin.


Or pos absolute ... Then I have to adyust thing on each text change.

The reason: want to nicely verticaly align flags.

EDIT: will try the left margin thing ....

BubikolRamios
Jul 9th, 2010, 08:39 AM
Nope. This is how it should look and it does work in ie 7.

http://www.mediafire.com/imgbnc.php/0450185b1f3f3291e32e6ad2c5c876882g.jpg (http://www.mediafire.com/imageview.php?quickkey=rmun3zjfdyj&thumb=5)

abduraooft
Jul 9th, 2010, 08:59 AM
Set overflow:auto to that outer div.

PS: Excessive use of inline styles is really very bad!

_Aerospace_Eng_
Jul 9th, 2010, 09:03 AM
Nope. This is how it should look and it does work in ie 7.

http://www.mediafire.com/imgbnc.php/0450185b1f3f3291e32e6ad2c5c876882g.jpg (http://www.mediafire.com/imageview.php?quickkey=rmun3zjfdyj&thumb=5)

Yes it does work in IE but it shouldn't. The floats are taken out of flow. It should fail. Any other browser and it doesn't work. They all behave the same except IE. The suggestion of overflow:auto; will work fine. Basically you just need to clear your floats.

BubikolRamios
Jul 9th, 2010, 09:55 AM
I give up, doh I designed something acceptable.

overflow:auto - it results, in best case, in img ocupying single line at top.



PS: Excessive use of inline styles is really very bad!


(-: , I allways wait until design looks good.

Kor
Jul 9th, 2010, 04:00 PM
(-: , I allways wait until design looks good.
And what might do wrong the CSS classes? You would save a lot of time if using classes instead of local styles.