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.
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??
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
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!
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
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.