Clear? Float? How do I make this Sidebar…uh…extend past the header?

  • Author
  • #1325338


    Hello all. If you see my site, you can see clearly that I’ve managed to move the Header text centered over the text of the posts. Whether I did this appropriately according to CSS good-practice is debatable, but that’s not what I’m asking about. Is there a way for me to move the top of the sidebar to the top of the page? I tried using position:relative and just shifting it up so much, but that is not very good for all situations and it gets cutoff by the header/moving outside of its container.

    -Confused Style Sheet

    The blog I need help with is


    Hi there,
    This is tricky since the theme you are using does not have an overall parent container/wrapper div for all the elements in the page. Give the following a try, but make sure and look at it while logged into WordPress and also when logged out, since the sidebar is going to appear to shift up and down by the height of the top WordPress admin bar. The following seems to preserve the responsive width of the theme and everything seems to flow as it should when I narrow and widen my browser window. You may have to play with the “top” value a little to get things aligned as you desire.

    .site-main .widget-area {
    position: absolute;
    right: 0;
    top: 50px;


    Cool! I think that’ will work well. Thanks for the help. I realized that that was the problem; there’s no easy Div situation. So it just has to be moved up. Thanks, though.


    You are welcome. In cases like this I typically just try and hit a happy medium with positioning.

The topic ‘Clear? Float? How do I make this Sidebar…uh…extend past the header?’ is closed to new replies.