Ie only - right column displays under left and middle column

Get Started
1

Hi everyone,

Excuse me for my silly question… But i am having a problem with a website i am creating.

I have a 3 column layout with a header at the top and a footer under the 3 columns. The problem i have at the moment is that for some reason the 3rd, or right hand side column, which contains an adsense ad block, is displaying underneath the menu, or first column which is on the left hand side. This only happens in internet explorer and for some reason i did not notice this until now. The website used to display correctly a few weeks ago when i last checked it in IE, so im guessing a change that i have made to the .css file is causing this, as it displays like this in IE throughout the website. The question though, is which one. I am not too clued up about how my website layout is set up as it was a three column layout template that was created in dreamweaver. I have customised this original layout to suit my site.

My website address is free4blackberry - Free BlackBerry Smartphone Downloads, Guides, News and More

As i have recieved some very good advice from this forum before, this is naturally my first stop.

If anyone could help me with this one, i would really appreciate it!!

Thanks in advance.

Craig.

2

Try removing the margin setting here:

.sidebar2 {
  background: none repeat scroll 0 0 #F4F4F4;
  float: left;
  [COLOR="Red"]margin: 0 5px;[/COLOR] /* remove */
  padding: 10px 0;
  width: 20%;
}

If that doesn’t fix it, then reduce the width by a % point or so as well.

3

Hi and thanks! Yes that does fix the problem… But it turns out that my problem is a little more confusing than i had previously thought.

Its not IE thats causing the problem, its the resolution of the screen i was viewing the site on. I mostly use a widescreen laptop to design my site. The margin that i set as you basically stated, is not neccessary as it just bumps the third column a bit to so that it is center when viewing the site on a widescreen. But when viewing the site on a resolution of 800x600 or 1024x768, the column just doesnt seem to fit… This is as the advert in the column is a set size? Kind of throws a spanner in the works, because it either fits snug at one resolution and looks horrible at another, or visa versa… Any ideas?

What resolution should i be designing my site in to start off with?

How do the rest of you guys get things to fit so darn perfectly??

Thanks!!

4

If you have columns set in % widths, you will run into problems like this if you have any fixed-width margins or paddings left or right of those columns.

E.g.

.sidebar1 {
  background: none repeat scroll 0 0 #F4F4F4;
  float: left;
  margin: 0 [COLOR="Red"]5px[/COLOR] 0 0;
  padding-bottom: 10px;
  width: 20%;
}

The thing to do is remove those margins, and if you need some left-right spacing, put it on inner element that have no set width (as you do on the inner div of the middle column).

5

Thanks Ralph!

Yes that sorted the issue out for me. Additionally though, i had to remove the margin set in the div wrapping the ad, then play around with its padding a bit.

It fits at whatever resolution i set it at, despite looking rather ugly at some resolutions, it fits. So i guess my goal is complete, but it looks like i too am left dreaming about those @media queries like Bryan in this article: Rethinking The Mobile Web

6

I am having a similar problem and I’ve tried a lot of things to fix this but to no avail… can anyone help me to figure this out? It’s driving me crazy!
URL: www.hoghedz.com/buy-the-music.html

My “Buy” links on the right of the music player drop below the left column but only in IE. I have the following code in the header:

<!–[if IE ]>
<style type=“text/css”>

  • {
    margin:0;
    padding:0;
    border:0;
    }
    </style>
    <![endif]–>

That was a recommended fix I found on another forum. And I’ve tried to remove margins in the css file, etc. It’s probably something simple and I’m just not seeing it but at this point I can’t look at this anymore. Ugh!

7

Hi Hollianne. Welcome to the forums. :slight_smile:

This is a different issue. You are a tad lucky the right column isn’t dropping in other browsers, too. What I would suggest is that you replace

<a name="buy">

</a>

with

<div id="buy">

</div>

It’s invalid to wrap divs etc in an <a> element anyway. But on your page, the content is going full width anyhow, so the next thing to do is give the new #buy div a width (say 680px) and then float it left.

The best way to do that on-page target link these days is to reference and ID rather than a "nave value. That’s why I’ve used id=“buy” instead of name=“buy”. You can put that id on any element, too, which is handy. It doesn’t have to be an anchor.

Hope that helps. :slight_smile:

8

Thanks so much! That fixed my column problem. Your help is much appreciated!!! :slight_smile:

9

Glad that helped. :slight_smile: