No replies
Los Angeles, CA
Last seen: 12 years 19 weeks ago
Los Angeles, CA
Joined: 2005-11-03
Posts: 18
Points: 0

I'm having a layout problem with IE6 for Win. (Shocker.)

On the blog page of a site (I'm using WordPress, btw), I have these two divs that are floated within another floated div - a container, a main text area, and a menu. The container div floats left with a left margin to bring it in a little bit; it in turn contains the main text area which floats right to butt it right up against the menu div, which floats left. (PS: I've already looked up and dealt with the possibility of the IE margin/float bug so I think that's covered, but who knows, I may not have dealt with it completely right).

Here's how it should look (in FF3 for Win)

Here's how it looks in IE6 Win. (Here I outlined the container div in purple and the main content div in orange; I'll call that the orange div from now on):

See that chunk of white space to the left of the brown-outlined text area inside the orange div? I want to lose that. When I call out a width for the orange div, IE6 squishes the stuff inside it while still maintaining that space on the right -- the div itself stays like 150px wider than I need it to be. This is preventing the menu from butting right up against it like I'd like (in fact at this point it's making things so wide that at 1024x768 the menu's at the bottom of the page.)

I've run both the HTML and CSS through the w3C validator. CSS is good; the only errors in the HTML come from where I've imported the blog content and pictures over from the client's Blogger account, which I'm frankly too lazy to go over there and figure out how to change. (If it comes to that I will though, obviously.)

The CSS for the three divs is as follows.

#content_index {
    float: right;
    padding-top: 0px;
    margin-left: 100px;
    margin-top: -2px;
    display: inline;
    border: 5px solid purple;
#container {
    padding: 0;
    width: 70%;
    border: 5px solid orange;
#menu {   
    float: left;
    width: 180px;
    margin-top: 15px;

The whole IE6-specific CSS sheet is here:

The whole main CSS sheet is here:

The blog page is here:

Thanks for reading this tome. Smile

-- o0o --

When in Hollywood, visit

~*~ When in Hollywood, visit ~*~