Extend Borders of Sidebar Box to Bottom of Page?

Hi Forum,

I don't know if my idea below is possible, but I would really like to have the borders of a sidebar-box to go all the way to the bottom of the page, so as to add a dividing line between the main page content and the side area. I've tried playing around using Firebug, but to no avail.

This is the page: http://www.easyhomes.tv/blog/investing-in-bangkok-property/

If anyone has any ideas, that would be much appreciated.

Thanks in advance,

Andii

 

If you want your sidebar to "foresee" how high your main content DIV will be, and then stretch all the way, that's something non-tabular layouts just cannot do.
Try to use border-right on your content instead somehow. You may have to add another container.

IMHO, getting that stripe to render how you would want to is far, far less important then fixing your "trifecta fail" -- that is how a combination of fixed width layout, fixed px fonts and illegible color contrasts is referred to here. As soon as I visited Easyhomes.tv, I had to zoom in the page. 11px is way too low by all standards. White text on light blue background -- a bad idea. You could also get rid of endless containers and wrappers, as well as all the unneeded classes and ID.

Here's an example. You've got something like this:

<div id="sidebar-wrapper">
     <div id="sidebar>
          <div class="sidebar-box-top">-snip-</div>
          <div class="sidebar-box">-snip-</div>
          <div class="sidebar-box">-snip-</div>
          <div class="sidebar-box">-snip-</div>
     </div>
</div>

Code (markup):

That should look more like this:

<div id="sidebar">
    <div>
        -snip-
    </div><div>
        -snip-
    </div><div>
        -snip-
    </div><div>
        -snip-
    </div>
</div>

HTML:

And that's only for the sidebar.

And that ALL is ONLY for the markup.
You've got a lot of useless scripting there as well. I visited all the pages, and I didn't spot ONE legible reason to use it in the first place.
That META atrocity... Let me guess, an SEO expert?

 

Hi wiicker95, and thanks for your response.

Actually, I'm trying to clean the site up for someone, and if you think it's a mess now, you should have seen it last week. The main body text was just 11px plus there was bits of HTML code showing on some posts along with massive gaps between paragraphs, and so it went on. I'm no expert with CSS - hence this request for suggestions - and my main focus is to clean up the content site-wide by improving the layout and format of blog articles, removing the over user of tags, and removing all the repetition of keyword phrases, which I'm assuming were written intothe posts on the advice of an SEO expert, once upon a time.

Getting back to the side column, I was simply trying to extend the borders down the bottom of the page so as to break all the ugly white space on the right once the side bar is out of site (see imattached file), but as I thought it looks as though this will prove to be a lot easier said than done, which is what I anticipated. Thanks for your feedback though, it's much appreciated

Andii

 

What you are looking for is called 'faux columns' -- since it's a crappy fixed width layout with inaccessible px metric fonts, just put a wrapper around both columns, set it to contain floats, and use a background-image on it set to repeat-y and offset to where your column would be.

Though really that whole layout concept should probably be pitched in favor of a responsive or at the very least elastic+semi-fluid one.

Honestly, I'd skip extending them like that and instead space them apart and give each a bottom border. They look bad running together as a single entity like that when they are quite obviously separate sections.

Of course it's turdpress so... good luck with that. Christmas knows it already has more pointless div, pointless classes and little if anything resembling semantic markup to begin with...

 

Hi Deathshadow and thanks for your response.

I'm not a CSS or HTML guy, although I do design my own sites and then pass onto others those things I can't do myself, but this isn't one of my site's unfortunately. I have made the page a million times more presentable than it was just a few days back (you'd have to see it to believe it), but I really would have liked to extend the right and left borders to the bottom of the page – height 100% - but it's a bit too confusing for me.

I guess I will put this remaining tweak on the back burner for now and see where the site owner wants to go with it in the New Year. I never know why some folks build sites so unnecessarily complicated, but then again perhaps this wasn't so bad 6+ years ago when the template was first launched.

Thanks once again for your input, I will note your response.

Best regards,

Andii