8 comments
Brian Moon Says:
It is fluid, just not dynamicly being sized for your browser width. The elements within my page should not need to know how large their container is to be appropriately sized. You misunderstand the idea of fluid.
Perhaps I should have been clearer because your example fails one important case. If the ad is taller than the rotator, the content after it will not flow correctly. Nice try, close. I was there months ago.
tim Says:
Brian,
Your table layout fails one important case as well.
Adblock Plus.
The "advertisement" label remains, while ABP hides the ad contents. I know that is not an ideal case (you want ads to be displayed for revenue purposes), but it is a real scenario. Should your page account for content modification from such a popular plugin?
Brian Moon Says:
No, I don't care what your 3rd party extensions do to screw up my page. That is a choice you make. That plugin is not popular. It used by less than one tenth of 1% of users.
Tim Says:
https://addons.mozilla.org/en-US/firefox/addon/1865
69 million downloads
9.5 million active users
And ports coming to chrome/webkit.
It's worth noting and I was only curious of your (and other) opinions on the matter. Not attempting to argue or start a flame war.
Thanks for the reply.
Roger Says:
@James Logsdon: Thanks for posting that bit with the two column positioning. It solved a problem I've been trying to fix for quite some time on my own blog :)
Brian Moon Says:
For those reading the comments about Adblock Plus, see my later post about ad stats. http://brian.moonspot.net/browser-stats-januaray-2010
James Logsdon Says:
Maybe I'm not understanding the issue fully, but your page isn't fluid. So why the need for a "fluid" left column?
In any case, this is pretty simple to do with CSS. Something like:
<div id="hot-deals">
<div id="rotator"><!-- Rotator here --></div>
<div id="ad"><!-- Ad here --></div>
</div>
<style type="text/css">
#hot-deals { position: relative; }
#rotator { margin-right: 300px; }
#ad { width: 300px; position: absolute; top: 0; right: 0; }
</style>