homepage Welcome to WebmasterWorld Guest from 54.166.100.8
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved