Previous Message
Next Message

Floating divs moved out of parent. Puzzzled???

Sent by Peter Speltz on 19 September 2005 19:07


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
 www.cafes.net/peter/css/snapshot4.png
 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 
www.cafes.net/peter/css/snapshot6.png

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.

div.obj_bar {
   margin: 1%;
   width: auto;
   border-top: solid 1px #000;
   border-bottom: solid 1px red;
   background-color: #80CF67;
}

div.obj_title {
   /*margin: 2% 2% 10% 0 ;*/
   padding: 2px;
   width: 50%;
   float: left;
   font-size: 14pt;
   /*font-family: Arial; */
   font-weight: bold;
}

/* object menu */
div.obj_links {
   width: 40%;
   float: right; /* this makes both jump container */
   margin: 0 ;
   font-size: 9pt;
   font-family: Arial;
   font-weight: bold;
   text-align: left;
}

<div class="obj_bar">
       <div class="obj_title">
             <img src="/img/customer_icon.gif" alt=""/>
              (00000004) Aaron Tyler Speltz
        </div>
       <div class="obj_links">
               <a href=http://localhost/customer/new_service/00000004>
                     New Internet Service
               </a>

                <a  href=http://localhost/customer/view2/00000004>
                    View2
                </a>
          </div>
</div>

Thanks again.
--
pjs
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: