| Block problems
Problems over width of site |
Stattovic
msg:4377454 | 3:15 am on Oct 21, 2011 (gmt 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,
Victor
|
rocknbil
msg:4377719 | 5:22 pm on Oct 21, 2011 (gmt 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">
</div>
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.
|
|
|
