vb.org Archive - Uniform Width for Left Column inside Forum vs Forum index?

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - Uniform Width for Left Column inside Forum vs Forum index? (https://vborg.vbsupport.ru/showthread.php?t=255222)

Okay ? I?m doing much, much better now. I implemented your above suggestions, but still had a few problems until I also changed forumL width to 0px in additional.css (along with your suggested forumC margin-left:165px), so that additional.css wound up as follows:

Code:

#forumFill{

background-image: none;

background-repeat: repeat-x;

width: 100%;

margin-right: auto;

margin-left: auto;

}



#forumL{

background-image: none;

background-repeat: no-repeat;

width: 0px;

float: left;

}



#forumC {

background-image: none;

background-repeat: no-repeat;

margin-left:165px;

float: left;

}

This is structurally what I?m looking for ? and I will now attempt to fill in the HTML and javascript where appropriate. During or after that, I may ask for some more help ? but for now, THANK YOU, SIR! I am indebted to you ? good karma shall follow you ? you the man!

Quote:

Originally Posted by gregmlb (Post 2136115)

Code:

#forumFill{

background-image: none;

background-repeat: repeat-x;

width: 100%;

margin-right: auto;

margin-left: auto;

}



#forumL{

background-image: none;

background-repeat: no-repeat;

width: 0px;

float: left;

}



#forumC {

background-image: none;

background-repeat: no-repeat;

margin-left:165px;

float: left;

}

Now that's what I'm talking about! Remember though sometimes css can be tricky, it's usually something simple you overlook or you over specify so for example the width:0px may work or may give you issues it all depends on what else you have customized but take your time and if all else fails Google what your looking for in regards to CSS, there's TONS of helpful sites and tutorials out there all over the web :D.

I could use a bit more input. What I've found is that, structurally, the following additional.css seems to work the best:

Code:

#forumFill{

background-image: none;

background-repeat: repeat-x;

width: 100%;

margin-right: auto;

margin-left: auto;

}



#forumL{

background-image: none;

background-repeat: no-repeat;

width: 0px;

float: left;

}



#forumC {

background-image: none;

background-repeat: no-repeat;

margin-left:175px;

float: left;

}

***Using the above, the left-side margin / column stays at 175px no matter how wide the browser, etc. … which is exactly what I want.***

HOWEVER, after I insert my HTML/javascript into the navbar template, what I see is the following:

https://vborg.vbsupport.ru/external/2010/12/41.jpg

and

https://vborg.vbsupport.ru/external/2010/12/42.jpg

So the google ads look fine, but the addthis.com widget, RSS, and even the "Testing 123" text are compressed into a narrow display that is far less than the 175px margin-left in forumC.

Now you might say to just increase the forumL width to 175px (from 0px) … and I've done that, and it does allow the addthis.com, RSS link, and "Testing 123" text to stretch to the right BUT all sorts of odd things happen, such as:
- if the browser window is too narrow when looking at the index.php page, it pushes the forum way down beneath the ads (out of immediate user view)
- if the browser window is wide when looking at index.php, then it doubles the 175px left side column
- when looking inside the forum itself (/forumdisplay.php?2-Midlife-Forum), no matter the browser width, it ALWAYS displays the threads way down beneath the ads (out of immediate user view)

I've also tried all permutations of forumL width and forumC margin-left values of 175px, 0px ... and all have some sort of major display flaw ... EXCEPT for that shown in the code window at the top.

If I using increasingly larger values for forumL width (going from 0px to say, 50px, then 100px, etc.), then I can see that the addthis.com widget, and RSS start to expand to the right ... but then the forum display (looking at index.php) falls beneath the ads (out of view) as the window narrows (as described above). And the forum itself will then ALWAYS show up beneath the ads. For example, if I change the forumL width to 175px (from 0px), then look at the forum (/forumdisplay.php?2-Midlife-Forum) here is what you see:

https://vborg.vbsupport.ru/external/2010/12/43.jpg

Any idea how to remedy this? Your input is appreciated greatly/hugely/massively - thanks!

--------------- Added [DATE]1292800757[/DATE] at [TIME]1292800757[/TIME] ---------------

--------------- Added [DATE]1292800911[/DATE] at [TIME]1292800911[/TIME] ---------------

I think I solved this myself using the following in additional.css. I switched to absolute positioning in forumC - do you see anything wrong or unadvisable here ... ??? It does appear to work in all cases, and in all widths of the browser ...

Code:

#forumFill{

background-image: none;

background-repeat: repeat-x;

width: 100%;

margin-right: auto;

margin-left: auto;

}



#forumL{

background-image: none;

background-repeat: no-repeat;

width: 175px;

float: left;

}



#forumC {

background-image: none;

background-repeat: no-repeat;

min-width:600px;

float: left;

position:absolute;

left:195px;

width:auto;

}

--------------- Added [DATE]1292806296[/DATE] at [TIME]1292806296[/TIME] ---------------

Okay - so I've discovered that using absolute positioning does have one unintended side effect ... one which I'm currently stuck on.

For some reason, the Footer always appears at the end of the left-side column ... right after the second of the two google 160x600 wide skyscraper ads ... regardless of whether that is where the end of the center section is, or not. [It should appear at the VERY BOTTOM of the page (after the end of the center section) ... or that is where I would like it to appear.] Here is what I mean:

https://vborg.vbsupport.ru/external/2010/12/44.jpg

https://vborg.vbsupport.ru/external/2010/12/45.jpg

So close - yet so far away. Any ideas???

Greg,

Give this a try:

Code:

#forumFill{

width:100%;

float: right;

margin-left:-185px;

}



#forumL{

position: absolute;

overflow: hidden;

float: right;

}



#forumC {

margin-left: 185px;

}

Edit: Ok I cleaned it up even more after this post check the above and let me know, basically we needed to simplify what we had notice no more width in the L or C etc.

That does work perfectly ... in all cases ... and in all browsers. You are a genius.

I'm scratching my head trying to figure out WHY that works - what exactly is the "overflow: hidden;" accomplishing? This awesome working solution is completely non-intuitive ... at least to me.

Michael - I owe you big time for helping me with this. If you PM me your shipping address, I can FEDEX you a bottle of your favorite booze, or <insert your gift preference here>. I honestly cannot thank you enough ... plus I'll probably have more questions shortly on other things :) You are a great individual for helping us (the vB/CSS mental midget masses) as you do ... THANKS!!!

What a great post!!! It has been super helpful!

TheLastSuperman, how would you change the css code in additional.css if I had a right column, not left? I've tried changing margin-left to margin-right and a bunch of other things, but my right column always ends up at the bottom near the footer.

Thanks!

Quote:

Originally Posted by enci (Post 2181003)

Sorry I overlooked this, I know it's been about two months but if your still interested shoot me a PM and we'll discuss then come back here and post our results for everyone else ;).

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (7)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01204 seconds Memory Usage 1,755KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (7)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: