Float right IE7 problem

HTML & CSS
1

HI guys,

I’m hoping someone can point me in the right direction.

I have a 3 column layout. Two menu columns floated right and a main body column. Hopefully you can see the image attached.

The layout works fine in all browsers when all div tags have content within them.

For some pages my ‘right’ column has no content and so I want the ‘left’ column to move all the way right to take the place of the ‘right’ column and the mainbody column to fill the remaining space.

This works great in all latest browsers.

HOWEVER. in IE7 the ‘left’ column stays put and the main body stays as it was too so there’s just a big empty space where the ‘right’ column was.

It seems that when the div tag is empty the latest browsers know to ignore it and so the left column floats right and the mainbody expands to fill the gap. However on IE7 it does not ignore the ‘right’ div tag when it’s empty.

Hopefully the attachment helps clarify what’s happening.

Thanks in advance for any pointers.

Owen

2

Hi and welcome :slight_smile:

Do you have an url for us to look at?

As a new member you will not be able to pot the url directly but you can use the following:

www dot my site dot com

It will make it easier for us to debug :smiley:

3

Hi Luki,

Unfortunately not - it’s on my localhost.

I think I may have found a workaround/fix. I had specified widths in the CSS for the div tags originally. Now I have instead specified widths to the content elements placed within those div tags.

Now, it seems, that the right column, although not ignored by IE7 has no width and so makes room for the left column to move further right.

Seems to work. Funny how you can mess about for hours trying to find a solution and as soon as you post a question online a new approach hits you between the eyes.

If anyone can suggest a better/neater workaround I’d love to hear it.

Thanks.

4

We need at least the full HTML and CSS to reproduce this. Right now we would merely be guessing :slight_smile:

5

Sorry guys…

Here’s the HTML:

<div id=“wrapper”>

	&lt;div id="right"&gt;&lt;jdoc:include type="modules" name="right" style="xhtml" /&gt;&lt;/div&gt;
	
&lt;div id="left"&gt;&lt;jdoc:include type="modules" name="left" style="xhtml" /&gt;&lt;/div&gt;
&lt;div id="mainbody"&gt;&lt;jdoc:include type="component" /&gt;&lt;/div&gt;

</div>

Here’s the CSS:

#wrapper{
width:780px;
margin:auto;
background-color:#FFFFFF;
}

#mainbody {
min-height:400px;
margin-left:10px;
margin-right:195px;
border-right:thin dashed #999999;
color: #666666;
padding-right:10px;
}

#left {
float:right;
/width:175px;/
margin-left:10px;
margin-right:10px;
color:#666666;
font-size:11px;
font-weight:normal;
}

#right {
float:right;
/width:185px;/
padding-left:10px;
color: #666666;
font-size:11px;
line-height:15px;

}

6

I has a question.

With your old code (widths left in), does IE7 start doing what the other browsers do if you remove the min-height from the mainbody?

I ask because you’ve got margins on the sides and min-height triggers haslayout, which does make IE6 and 7 act differently with margins and floats.

I won’t explain more if removing the min-height doesn’t work, because that would mean I’m totally on the wrong track anyway.

Also, does you haz a doctype? Your HTML doesn’t show us.

7

Hi,

Thanks for the suggestion. Tried putting the widths back in and removing the min-height property, but made no difference in IE7

8

Hi, I’m unable to test in anything other thent IE (friend won’t download it…) but this works for IE7. Mix and match your FF version with this if FF doesn’t comply :slight_smile:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
#wrapper{width:780px;
margin:auto;
background-color:#FFFFFF;
}

#mainbody {
min-height:400px;
margin-left:10px;
margin-right:195px;
border-right:thin dashed #999999;
color: #666666;
background:green;
padding-right:10px;
}

#left {
float:right;
width:175px;
margin-left:10px;
margin-right:10px;
color:#666666;
background:blue;
font-size:11px;
font-weight:normal;
}

#right {
float:right;
max-width:185px;
background:red;
color: #666666;
font-size:11px;
line-height:15px;

}
</style>
</head>
<body class="home">
<div id="wrapper">
<div id="right"></div>

<div id="left">asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 

asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 

asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </div>
<div id="mainbody">asdf</div>
</body>
</html>
9

Thanks RyanReese. SO basically what you’re saying is use max-width rather than width for the right div?

10

Well logically if there isn’t content we don’t want that div to be 175px. We should let it expand to 185px that way it will allow for trhe situation of no content for it to collapse, but if it DOES have content it will go to that width (maximum)

I hope I’ve explained it so you understand :).