Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Block problems

Problems over width of site

3:15 am on Oct 21, 2011 (gmt 0)

New User

joined:Oct 21, 2011
posts: 2
votes: 0

I posted this under the html banner then realised it was more about css which I have even less knowledge about.

Hi Guys,

I run a very small cricket website www.shicl.co.uk. In it I have two side bars one on the left and a links one on the right. It was a free download and works well for me apart from one problem.

I would like the links side bar moved to the left side say underneath the other side bar this would allow me to spread the results and league table <tables> further across the pages.

I have tried all sorts on test files but continue to make a mess of what I am doing so I revert it back to the original. I have managed at times to move all the links but the block remains thereby not achieving my ambition.

I would invite any expertise knowledge with great grattitude.

Many thanks,
5:22 pm on Oct 21, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Welcome aboard Stattovic, is this in any sort of CMS or static pages?

**of course make a backup before attempting any of the below**

In any case, it's easy to see your confusion - this page is bereft with something we know here as div-itis - so many divs, so little content. :-) No matter though . . .

Your first task is to install Firebug for Firefox, when you right-click an element this will highlight what the element is, and show you where it starts and stops. I have a feeling that's the only reason you're having trouble, figuring out where the div actually starts and stops. The left block (appears to) start here

<div class="BlockBorder">

and ends here, at the second </div> in the row of three closing divs

</div></div></div> <!-- the LAST one closes "Column2" -->

Another way to visualize, it's right after the "start" of "Column2" and just BEFORE the one </div> and the start of "MainColumn".

Cut that entire chunk (don't forget, only the first two closing </div>'s) and move it just before this. In the source code, you'll just be moving it up:

<!-- put it here -->
</div> <!-- This is the END of column 1 -->
<div class="Column2">

That previous example shows a way to navigate through heavy code - add comments where each pair of chunks ends. :-)

See if that works FIRST, but you'll now see an empty 20% space to the right. You should have this where it was

<div class="Column2">

Which can be removed, or safer, commented out:

<!-- <div class="Column2">
</div> -->

I don't see any widths applied to MainColumn, so I am assuming that it will fill up whatever is not taken up by the two columns - it should now fill out the right side of the page.