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/
