Hi all. I request the wisdom of the list again. I'm having some fun
with css and have run across something I do not understand no matter
how muck I read CSS The Definitiev Guide. I'm using FireFox 1.0.6 on
Suse 9.1 Pro.
The issue is i have 3 divs. obj_bar is a container for the obj_title
and obj_links. Its width is auto so it is as wide as parent lets it
be. The parent , the main div that takes up most of the page, is 70%
of the body so it is fluid and floated right.
I want obj_title to be filled arbitrarily with content but be only
~50% the width of the obj_bar. So i float it left. On the other
~50% of the obj bar I want obj_links so I float that right. The top
border is black and the bottom border is red on the obj_bar so you can
see what is happening..
Now for some reason when I float the *obj_links* right, both the
*obj_title* and *obj_links* jump out of the container div. The borders of
the container(*obj_bar*) smash together and no background is visible.
They (*obj_title* and *obj_links*) are
both floated perfectly below their container(*obj_bar*). See
I do not understand this.
If i do not float the obj_links right, they both stay in the
container, albeit the obj_links drop below the obj_title no matter how
small i make its width. I do not understand this either. I expected
it to be next to the left floated div as long as there was enough
width in the parent to accomodate them both. See
Why are they jumping the container div? Why does obj_links seem to
clear itself from the left floated div unless i float it also? I'm
using FireFox 1.0.6 on a Suse 9.1 Linux box. Below is the css and
html bits. Thank you.
border-top: solid 1px #000;
border-bottom: solid 1px red;
/*margin: 2% 2% 10% 0 ;*/
/*font-family: Arial; */
/* object menu */
float: right; /* this makes both jump container */
margin: 0 ;
<img src="/img/customer_icon.gif" alt=""/>
(00000004) Aaron Tyler Speltz
New Internet Service
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/