homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS floating div's being obscured in IE6/Win

10+ Year Member

Msg#: 392 posted 4:52 pm on Nov 14, 2002 (gmt 0)

I'm trying to create a utility bar for an intranet application using CSS positioning. I want breadcrumbs to be flush left, then some links on the right. The problem is, in Windows IE 6, if I give the containing div (#Utilties) a background-color (gray), the two items (#Breadcrumbs, #OtherNavigation) in it go behind the gray box.

I'm doing this in the markup (XHTML transitional):

<div id="Utilities">

<div id="Breadcrumbs">
(breadcumb navigation here...)

<div id="OtherUtilities">
(other stuff here...)

<div class="Spacer">&nbsp;</div>


And the CSS:

#Utilities { background-color: #ccc; }
#Breadcrumbs { float: left; }
#OtherUtilities { float: right; text-align: right; }
.Spacer { clear: both; font-size: 1px; }

(the Spacer div is so the outer, gray box expands to be the full size of its contents.)

Anyone have any ideas on how to make the contents visible? I tried z-index reordering, visibility, re-ordering in the CSS file. I tried absolute positioning but ran into other problems.

I know tables will work, but I'm giving it the college try to go 100% CSS layout, for structural as well as educational purposes.


P.S. Everything looks fine in Mac browsers (IE, Chimera) but I haven't tried other Windows browsers.



10+ Year Member

Msg#: 392 posted 10:58 pm on Nov 14, 2002 (gmt 0)

Question: Do you have other content going into the div#Utilities?

If not, then I don't think you need the float:right on the div#OtherUtilities (your text is right-aligned anyway). Because of this, you don't need the div.Spacer either.

I don't know if this will fix your problem or not, because I can't seem to replicate it either way (tested in IE 6, Mozilla 1.1, Opera 6.05).


10+ Year Member

Msg#: 392 posted 3:12 pm on Nov 15, 2002 (gmt 0)

Thanks for the reply. There isn't any other content in the Utiltities div.

But I fixed it. I did a combination of no positioning (for the right, #OtherUtilities, div) and absolute positioning for the left (#Breadcrumbs) and it worked.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved