Take the 2-minute tour ×

I'm trying to create the following:


The problem is the poll in the lower right corner. I'd prefer it to sit at the bottom of the window, but not overlap (or underlap) the latest blogs box (right sidebar) no matter how long the latest blogs sidebar gets. But if nothing else, it could just come after the sidebar.

The part I'm most concerned about is the doghouse image overlaying the poll, with the poll buttons still being clickable. Furthermore, this is on WordPress so the right sidebar is only 150 pixels wide, and the doghouse somehow needs to expand past its containing sidebar div.

Is this possible?

Here is the basic html structure:

<div id="container">

    <div id="content">
        page content

    <div id="primary">
        left sidebar

    <div id="secondary">
        right sidebar

    <div id="third">

    <div id="footer">


and here is the css:

#container {
    float: left;
    width: 100%;
#content {
    margin: 0 170px;
#primary, #secondary {
    float: left;
    width: 150px;
#primary {
    margin: 0 0 0 -100%;
#secondary {
    margin: 0 0 0 -150px;

#third {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 150px;
    z-index: -1;

#footer {
    clear: left;
    width: 100%;


share|improve this question
It is a shame that someone has downvoted this and not given you a reason. Yes, it is possible to achieve what you are aiming to do but we need to know what you have tried already. If you show the CSS and HTML that you are having trouble with and if you have a link to the the work that you have done so far then that would also be useful. We can then provide some help and constructive feedback for you. –  My Head Hurts Oct 31 '11 at 12:53
It's tricky because the code I'm using is clearly not the right idea. But I've added what I did try. –  Zade Oct 31 '11 at 13:03
It is always good to show that you have tried - if it was right then you wouldn't be on here ;) –  My Head Hurts Oct 31 '11 at 13:48
add comment

1 Answer

up vote 2 down vote accepted

Here are some options

This one has the doghouse at the bottom of sidebar:


Examples below have the doghouse at the bottom of the site. ( Above your footer mostlikely. )


this next one just has less sidebar content than the prior link http://jsfiddle.net/PfnVd/2 - it's to show how sidebar doesn go over the "doghouse" div.

http://jsfiddle.net/PfnVd/3/ - centered the img..

http://jsfiddle.net/PfnVd/4/ - with long content area.

http://jsfiddle.net/PfnVd/5/ - the text..

And in all of these you can add text over the image as you normally would.

share|improve this answer
+1 Nice selection of suggested approaches –  My Head Hurts Oct 31 '11 at 13:51
amazing. thanks a million. –  Zade Nov 2 '11 at 5:51
add comment

Your Answer


