Fixed sidebar and fluid content (CSS+HTML)
Hi guys,
I am having trouble with something and trying to fix it since I don't even want to calculate the number of hours. This is driving me nuts.
What I'm trying to do: make a fixed-width left sidebar (250px) in a fluid-width right content. Any tips I should know about this? This is what I want to achieve (this is a mockup)
http://www.skinbox.net/community/upl...7746525-U1.jpg
So the sidebar has to always remain 250px in terms of width, no matter what screen resolution we have. The content has to be extensible, meaning that it changes when we change the screen resolution.
This is the CSS code for the sidebar (#sidebar), content (#main) and wrapper (#ipbwrapper):
Code:
#ipbwrapper {
width: 85%;
margin: 0 auto;
background: transparent url({style_images_url}/wrapper.png) repeat-y top left;
}
#main {
float: left;
margin-left: 260px;
background: #fff url({style_images_url}/bg-main.gif) repeat-x top left;
margin-top: 15px;
padding: 15px;
position: absolute;
-moz-border-radius: 8px 0 8px 0;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 0px;
}
#sidebar {
float: left;
width: 260px;
height: 100%;
background: transparent;
color: #7287b0;
min-height: 500px;
}
And here is the main code where these divs are displayed:
Code:
<div id="bg-top"><div id="bg-left"><div id="bg-right"><div id="bg">
<h1>{$this->settings['board_name']}: {$header_items['title']}</h1>
<p id='content_jump'><a id='top'></a><a href='#j_content' title='{$this->lang->words['jump_to_content']}' accesskey='m'>{$this->lang->words['jump_to_content']}</a></p>
<div id='ipbwrapper'>
<div id="main">
<div id='secondary_nav'>
<ul id='breadcrumb' class='left'>
<php>$this->did_first = 0;</php>
<if test="switchnavigation:|:!$this->settings['remove_forums_nav'] OR ipsRegistry::$current_application == 'forums'">
<li class='first'><a href='{parse url="act=idx" seotitle="false" base="public"}'>{$this->settings['board_name']}</a></li>
<if test="didfirstnav:|:$this->did_first=1"></if>
</if>
<foreach loop="navigation:$items['navigation'] as $idx => $data">
<li<if test="notdonefirstapp:|:!$this->did_first"> class='first'</if>><if test="didfirstappnow:|:$this->did_first"><span class='nav_sep'>></span></if> <if test="navigationlink:|:$data[1]"><a href='{parse url="{$data[1]}" base="$data[4]" seotitle="$data[2]" template="$data[3]"}' title='{$this->lang->words['nav_return_to']}{$data[0]}'></if>{$data[0]}<if test="closenavigationlink:|:$data[1]"></a></if></li>
<if test="forsuredidfirstnav:|:$this->did_first=1"></if>
</foreach>
</ul>
<ul id='section_links' class='right'>
<if test="siteruleslink:|:$this->settings['gl_show'] and $this->settings['gl_title']">
<li><a href='<if test="ruleslink:|:$this->settings['gl_link']">{$this->settings['gl_link']}<else />{parse url="app=forums&module=extras&section=boardrules" base="public"}</if>'><if test="siterulestitle:|:$this->settings['gl_title']">{$this->settings['gl_title']}<else />{$this->lang->words['board_rules']}</if></a></li>
</if>
<li><a href='{parse url="app=core&module=search&do=<if test="ncmember:|:$this->memberData['member_id']">new_posts<else />active</if>&search_filter_app[<if test="viewnewcontentapp:|:$this->registry->getCurrentApplication() != 'core' AND IPSSearchIndex::appIsSearchable( $this->registry->getCurrentApplication() )">{$this->registry->getCurrentApplication()}<else />forums</if>]=1" base="public"}' accesskey='2'>{$this->lang->words['view_new_posts']}</a></li>
<li><img src='{$this->settings['img_url']}/feed.png' alt='{$this->lang->words['rss_feed']}' id='rss_feed' class='clickable' /></li>
</ul>
</div>
<div class="clear"></div>
<div id='content' class='clear'>
<a id='j_content'></a>
<if test="mainpageContent:|:$html">{$html}</if>
<br class='clear' />
</div>
<div id='footer_utilities' class='clearfix clear rounded'>
<h2 class='hide'>{$this->lang->words['skin_and_lang']}</h2>
<if test="skinchanger:|:$this->settings['allow_skins'] AND $footer_items['skin_chooser']">
<if test="uagentlocked:|:$this->memberData['userAgentLocked'] AND ! $this->memberData['userAgentBypass']">
<p id='useragent_msg'>
{$this->lang->words['skin_browser_set']} <a href='{parse url="{$this->settings['query_string_formatted']}&unlockUserAgent=1" base="public"}'>{$this->lang->words['override_browser_theme']}</a>
</p>
<else />
<form action="{parse url="{$this->settings['query_string_formatted']}" base="public"}" method="post" class='left'>
<fieldset>
<input type='hidden' name='k' value='{$this->member->form_hash}' />
<label for='newSkin' class='hide'>{$this->lang->words['theme_prefix']}</label>
<select name="settingNewSkin" id='newSkin'>
{$footer_items['skin_chooser']}
</select>
<input type='submit' value='{$this->lang->words['jmp_go']}' class='input_submit alt' id='newSkinSubmit' />
</fieldset>
</form>
</if>
</if>
<form action="{parse url="{$this->settings['query_string_formatted']}" base="public"}" method="post" class='left'>
<fieldset>
<input type='hidden' name='k' value='{$this->member->form_hash}' />
<input type='hidden' name='setlanguage' value='1' />
<input type="hidden" name="langurlbits" value="{$this->settings['query_string_safe']}&cal_id={$this->request['cal_id']}" />
<label for='newLang' class='hide'>{$this->lang->words['language_prefix']}</label>
<select name="langid" id='newLang'>
{$footer_items['lang_chooser']}
</select>
<input type='submit' class='input_submit alt' value='{$this->lang->words['jmp_go']}' id='newLangSubmit' />
</fieldset>
</form>
<h2 class='hide'>{$this->lang->words['exec_stats']}</h2>
<ul class='right'>
<li>{$this->lang->words['time_now']} {$footer_items['time']}
<if test="lastvisit:|:$this->memberData['member_id'] AND $this->memberData['last_visit']"><p>{$this->lang->words['you_last_visit']} {parse date="$this->memberData['last_visit']" format="short"}</p></if>
</li>
<if test="showdebuglevel:|:$this->memberData['member_id'] and $this->settings['debug_level']">
<li><img src='{$this->settings['img_url']}/stats_time.png' alt='{$this->lang->words['icon']}' /> {$stats['ex_time']} {$this->lang->words['stats_sec']}</li>
<li><img src='{$this->settings['img_url']}/stats_server.png' alt='{$this->lang->words['icon']}' /> {$stats['server_load']}</li>
<li><img src='{$this->settings['img_url']}/stats_database.png' alt='{$this->lang->words['icon']}' /> {$stats['queries']} <if test="sqldebuglink:|:IPS_SQL_DEBUG_MODE"><a href='{parse url="{$this->settings['query_string_safe']}&debug=1" base="public"}'></if>{$this->lang->words['stats_queries']}<if test="closesqldebuglink:|:IPS_SQL_DEBUG_MODE"></a></if></li>
<li><img src='{$this->settings['img_url']}/stats_compression.png' alt='{$this->lang->words['icon']}' /> {$stats['gzip_status']}</li>
</if>
</ul>
</div>
<!-- __FOOTER__ -->
<!-- /__FOOTER__ -->
<!--DEBUG_STATS-->
<div id='board_footer'>
<ul id='utility_links' class='left'>
<li><a href='#top' title='{$this->lang->words['go_to_top']}'>{$this->lang->words['back_to_top']}</a></li>
<li><a href='{parse url="" base="public"}' title='{$this->lang->words['sj_home']}'>{$this->lang->words['sj_home']}</a></li>
<li><a href="{parse url="app=core&module=global&section=login&do=deleteCookies&k={$this->member->form_hash}" base="public"}" title='{$this->lang->words['delete_all_cookies_title']}'>{$this->lang->words['delete_my_cookies']}</a></li>
<li><a href="{parse url="app=forums&module=forums&section=markasread&marktype=all&k={$this->member->form_hash}" base="public"}" title='{$this->lang->words['mark_all_as_read']}'>{$this->lang->words['mark_board_as_read']}</a></li>
</ul>
{$footer_items['copyright']}
</div>
{$stats['task']}
<if test="includeLightboxDoReal:|:$this->settings['do_include_lightbox_real']">
{parse template="include_lightbox_real" group="global" params=""}
</if>
</div>
<div id="sidebar">
<div class="logo" align="center"><if test="brandingBar:|:method_exists( $this->registry->output->getTemplate( $this->registry->getCurrentApplication() . '_global' ), 'overwriteHeader' )">{parse template="overwriteHeader" group="{current_app}_global" params=""}<else />{parse template="defaultHeader" group="global" params=""}</if></div>
<div class="menu">
<ul class="menu">
<if test="showhomeurl:|:$this->settings['home_url']">
<li id='nav_home'><a href='{$this->settings['home_url']}' title='{$this->lang->words['homepage_title']}' rel="home">{$this->settings['home_name']}</a></li>
</if>
{parse variable="forumActive" default="" oncondition="IPS_APP_COMPONENT == 'forums'" value="active"}
{parse variable="membersActive" default="" oncondition="IPS_APP_COMPONENT == 'members'" value="active"}
{parse variable="helpActive" default="" oncondition="IPS_APP_COMPONENT == 'core' AND $this->request['module'] == 'help'" value="active"}
<if test="!ipsRegistry::$applications['forums']['app_hide_tab']"><li id='nav_discussion' class='{parse variable="forumActive"}'><a href='{parse url="act=idx" seotitle="false" base="public"}' title='{$this->lang->words['go_to_discussion']}'>{$this->lang->words['discussion']}</a></li></if>
<if test="!ipsRegistry::$applications['members']['app_hide_tab']"><li id='nav_members' class='{parse variable="membersActive"}'><a href='{parse url="app=members&section=view&module=list" base="public"}' title='{$this->lang->words['go_to_memberlist']}'>{$this->lang->words['tb_mlist']}</a></li></if>
<if test="applicationsloop:|:is_array($header_items['applications']) AND count($header_items['applications'])">
<foreach loop="applications:$header_items['applications'] as $data">
<if test="showingapp:|:$data['app_show']">
{parse variable="appActive" default="" oncondition="$data['app_active']" value="active"}
<li id='nav_app_{$data['app_dir']}' class="{parse variable="appActive"}"><a href='{parse url="app={$data['app_dir']}" seotitle="false" base="public"}' title='{$this->lang->words['go_to_prefix']}{IPSLib::getAppTitle( $data['app_dir'] )}'>{IPSLib::getAppTitle( $data['app_dir'] )}</a></li>
</if>
</foreach>
</if>
</ul>
<div class="menu-header"><if test="memberbox:|:$this->memberData['member_id']"><a href="{parse url="showuser={$this->memberData['member_id']}" seotitle="{$this->memberData['members_seo_name']}" template="showuser" base="public"}" title='{$this->lang->words['your_profile']}'><img src='{$this->memberData['pp_thumb_photo']}' alt="{$this->memberData['members_display_name']}{$this->lang->words['users_photo']}" width='16px' height='16px' id='userlinksphoto' /></a> </if>Hi {$this->memberData['members_display_name']}</div>
<div class="menu-inner">
<div id="userlinks">
<if test="memberbox:|:$this->memberData['member_id']">
<if test="messengerlink:|:$this->memberData['g_use_pm'] AND $this->memberData['members_disable_pm'] == 0">
<a href='{parse url="app=members&module=messaging" base="public"}' title='{$this->lang->words['your_messenger']}'>{$this->lang->words['your_messenger']} <span id='new_message'>({$this->memberData['msg_count_new']} {$this->lang->words['msg_new']})</span></a>
</if>
<a href="{parse url="showuser={$this->memberData['member_id']}" seotitle="{$this->memberData['members_seo_name']}" template="showuser" base="public"}" title="{$this->lang->words['your_profile']}">{$this->lang->words['my_profile']}</a>
<a href="{parse url="app=core&module=usercp" base="public"}" title="{$this->lang->words['cp_tool_tip']}">{$this->lang->words['your_cp']}</a>
<a href="{parse url="app=members&module=profile&section=friends&do=list" base="public"}" title="{$this->lang->words['manage_friends']}">{$this->lang->words['manage_friends']}</a>
<a href='{parse url="app=core&module=usercp&tab=members&area=ignoredusers" base="public"}' title="{$this->lang->words['manage_ignored_users']}" class='manage_enemies'>{$this->lang->words['manage_ignored_users']}</a>
<if test="bloglink:|:$this->memberData['has_blog'] AND IPSLib::appIsInstalled( 'blog' )">
<a href="{parse url="app=blog&module=display&section=blog&mid={$this->memberData['member_id']}" base="public"}" title="{$this->lang->words['go_to_my_blog']}">{$this->lang->words['my_blog']}</a></if>
<if test="gallerylink:|:$this->memberData['has_gallery'] AND IPSLib::appIsInstalled( 'gallery' )">
<a href="{parse url="app=gallery&module=user&section=user&user={$this->memberData['member_id']}" base="public"}" title="{$this->lang->words['go_to_my_gallery']}">{$this->lang->words['my_gallery']}</a></if>
<script type='text/javascript'>
if( $('user_link_menucontent') ){
$('user_link_menucontent').hide();
}
</script>
{parse js_module="friends"}
<a href="{parse url="app=core&module=global&section=login&do=logout&k={$this->member->form_hash}" base="public"}" title="{$this->lang->words['log_out']}">Logout</a>
<else />
<a href='{parse url="app=core&module=global&section=login" base="public"}' title='{$this->lang->words['sign_in']}'>{$this->lang->words['sign_in']}</a>
<a href="{parse url="app=core&module=global&section=register" base="public"}" title='{$this->lang->words['register']}'>{$this->lang->words['register']}</a>
<a href="{parse url="app=core&module=help" base="public"}" title='{$this->lang->words['view_help']}' rel="help" accesskey='6'>{$this->lang->words['sj_help']}</a>
</if>
</div></div>
<div class="menu-header">Search</div>
<div class="menu-inner" style="padding-left:10px;padding-right:10px;text-align:center;">
<div id='search'>
<if test="quicksearchform:|:! in_array( $this->settings['search_method'], array( 'traditional', 'sphinx' ) )">
<form action="{parse url="app=core&module=search&do=quick_search&search_filter_app[all]=1" base="public"}" method="post" id='search-box' >
<else />
<form action="{parse url="app=core&module=search&do=quick_search&search_filter_app[<if test="searchfilterapp:|:! empty($this->request['search_app'])">{$this->request['search_app']}<else /><if test="searchfiltercurrentapp:|:IPSSearchIndex::appIsSearchable( $this->registry->getCurrentApplication() )">{$this->registry->getCurrentApplication()}<else />forums</if></if>]=1" base="public"}" method="post" id='search-box' >
</if>
<fieldset>
<label for='main_search' class='hide'>{$this->lang->words['sj_search']}</label>
<input type='text' id='main_search' name='search_term' class='text_input' size='21' tabindex='6' />
</fieldset>
</form>
<a href='{parse url="app=core&module=search" base="public"}' title='{$this->lang->words['advanced_search']}' accesskey='4' rel="search" id='adv_search'>{$this->lang->words['advanced']}</a>
</div>
</div>
<div class="clear"></div>
<if test="accessreports:|:($this->memberData['g_is_supmod'] == 1 OR ( isset( $this->memberData['access_report_center'] ) AND $this->memberData['access_report_center'] ) )">
<br />
<div class="menu-header">Admin/Mod Area</div>
<div class="menu-inner">
<div id="userlinks">
<if test="showacplink:|:$this->memberData['g_access_cp'] == 1 AND $this->settings['security_remove_acp_link'] == 0">
<a href="{$this->settings['_admin_link']}" title='{$this->lang->words['admin_cp']}'>{$this->lang->words['login_to_acp']}</a>
</if>
<if test="issupermod:|:$this->memberData['g_is_supmod'] == 1">
<a href='{parse url="app=core&module=usercp&tab=members&area=mod_ipaddress" base="public"}' title='{$this->lang->words['ip_lookup']}'>{$this->lang->words['ip_lookup']}</a>
<a href='{parse url="app=core&module=usercp&tab=forums&area=mod_announcements" base="public"}' title='{$this->lang->words['post_announcement']}'>{$this->lang->words['post_announcement']}</a>
</if>
<if test="rclink:|:$this->memberData['access_report_center']">
<a href="{parse url="app=core&module=reports&do=index" base="public"}" title='{$this->lang->words['view_reports']}'>{$this->memberData['_cache']['report_num']} {$this->lang->words['report_member_bar']}</a>
</if>
</div>
</div></if>
<br class="clear">
</div></div>
<div class="clear"></div>
</div></div>
<div class="clear"></div>
<div class="shadow">
<div class="skinbox"><div style="float:left;"><a href="http://www.skinbox.net/" title="IPB skins, vBulletin skins, Web templates and more! - Skinbox" target="_blank">IPB skin</a> by <a href="http://www.skinbox.net/" title="Invision skins, vBulletin styles, HTML templates and more! - Skinbox" target="_blank"><b>Skinbox</b></a></div>
<div style="float:right;"><a href="http://www.skinbox.net/" title="Quality IPB skins, premium vBulletin styles, cheap Web templates and much more! - Skinbox" target="_blank"><img src="{style_images_url}/skinbox_dark.png" border="0" alt="Quality IPB skins, premium vBulletin styles, cheap Web templates and more!"></a></div></div></div>
<div class="clear"></div>
</div></div></div>
</div></div></div></div>
But it doesn't work. Well, at least partially. Can someone please help me with this?
Thanks so much in advance.
Re: Fixed sidebar and fluid content (CSS+HTML)
Similar problem was solved here.
Re: Fixed sidebar and fluid content (CSS+HTML)
it always amazed me how it came to have millions of people condemn tables for layout with all their CSS-P evangilism. Use tables, they always worked, they're not broken, they have no semantics behond the way they are rendered... and think about it, a 2 or 3 column layout is a tableture layout... everything is....
this should get a few people going... :wave:
