Previous Message
Next Message

Floating divs moved out of parent. Puzzzled???

Sent by Peter Speltz on 19 September 2005 18:06

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.

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 class="obj_links">
               <a href=http://localhost/customer/new_service/00000004>
                     New Internet Service

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

Thanks again.
css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: