Adding a div to the sidebar / Getting the positioning right

  • Here’s a link to my site:
    https://www.jump-punch.com

    I’m in the process of chaning the links to list by category (some links appear twice, that’s okay, I’ll get to that later) and I want to have a separate div for some of them. I’m having difficulty positioning the “dude!!!” section (a new div) and the sidebar (another div) underneath it. I’ll deal with the IE fixes later.

    Would anyone be able help out so the sidebar links appear below the “dude!!!” section? And the dude section’s position stays fixed to the right of the my blog content?

    Would I have to create a wrapper that goes around the blog content and the sidebar? I’ve spent a few hours trying to get this to work and haven’t really gotten anywhere.

    Here’s some examples of the CSS

    DUDE CSS:
    #dudecontainer{
    width: 229px;
    line-height: -15px;
    clear: both;
    position:absolute;
    right: 15%;
    }
    #dudeheader{
    height: 79px;
    }
    #dudebody{
    position: absolute;
    padding-right: 45px;
    }
    #dudefooter{
    margin-top: 15;
    position: relative;
    }
    #dudebody ul {
    list-style-image: none;
    list-style-type: none;
    }

    #dudebody li{
    padding-bottom: 8px;
    margin-left: -15px;
    }

    SIDEBAR CSS:
    #sidebar {
    font: 8pt ‘Trebuchet MS’, Verdana, Arial, Sans-Serif;
    clear: right;
    top: inherent;
    }

    THE XHTML:
    <div id=”dudecontainer”>
    <div id=”dudeheader”></div>
    <div id=”dudebody”>

      <?php wp_get_linksbyname(‘Dude!’); ?>

    </div>
    <div id=”dudefooter”></div>
    </div>

    <div id=”sidebar”>
    ***Default sidebar code***
    </div>

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jaredcunha

    (@jaredcunha)

    Anyone, I know the absolute positioning is probably screwing with it, but otherwise, it just displays either all the way to the right or underneath the blog content.

    I’m not quite sure i understand how you want it positioned; personally, at first glance I would create one div to wrap around both the “dude” section AND the sidebar – make it absolutely positioned, give it the width of 229px or whatever – then within that add a div for the sidebar, relative positioned at 100% width, with NO setting right, left, top or bottom (unless you want to nudge it slightly one way or the other) – you can add a simple br (break) in the code, or make the display: block setting for it. Close that div, then add another div (dude-div) – this one also within the larger container div – and likewise make it relatievly positioned at 100% – it should be right under the sidebar.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding a div to the sidebar / Getting the positioning right’ is closed to new replies.