Basic CSS Right Sidebar (fixed width) https://brunboarddesigns.runboard.com/t104 Runboard| Basic CSS Right Sidebar (fixed width) en-us Fri, 29 Mar 2024 00:42:20 +0000 Fri, 29 Mar 2024 00:42:20 +0000 https://www.runboard.com/ rssfeeds_managingeditor@runboard.com (Runboard.com RSS feeds managing editor) rssfeeds_webmaster@runboard.com (Runboard.com RSS feeds webmaster) akBBS 60 Re: Basic CSS Right Sidebar (fixed width)https://brunboarddesigns.runboard.com/p501,from=rss#post501https://brunboarddesigns.runboard.com/p501,from=rss#post501Here is a picture of the basic sidebar layout. I added colors and the Runboard logo to the pic and then enclosed the pic in quotes so you can have a visual of what the code does: quote: nondisclosed_email@example.com (Pastor Rick)Sun, 30 Oct 2011 13:55:45 +0000 Basic CSS Right Sidebar (fixed width)https://brunboarddesigns.runboard.com/p500,from=rss#post500https://brunboarddesigns.runboard.com/p500,from=rss#post500This first and most basic right sidebar layout consists of fixed width elements and has the sidebar on the right hand side with both your boards banner and your boards content on the left hand side. All of this is enclosed in a wrapper which centers the layout on the browser window. The codes below set up this type of sidebar with a total board width of 990px. This is the maximum width you can have without a scrolling bar at the bottom for those who are stuck with a 1024x768 screen resolution. The CSS portion of the layout goes like this and sets up a sidebar 150px wide and a banner/logo area that is 840px wide and 250px high: The CSS Codes #wrapper { position:relative; width:990px; border: 2px solid #FF0000; margin:0 auto; } #header { float: left; width:840px; height:250px; background: #FFFF80; } #sidebar { float:right; width:150px; background: #80FFFF; margin:0 auto; } #content { width:840px; float: left; } .clear { clear: both; } The HTML goes like this: In the HTML Header: <div id="wrapper"> <div id="header">Put your banner/logo image here</div> <div id="sidebar">Your Sidebar content, Like links, text and images goes here</div><!-- end sidebar -->   <div id="content"> In your HTML Footer: </div><!-- end content --> <div class="clear"></div><!-- clears all floats --> </div><!-- end wrapper --> ----------------------------------------------------- NOTE: The CSS for the content is set to "float: left." This is done to make sure any add-ons you make to the board side of things will stay in the area assigned to them and not bleed over or position themselves into either the banner or sidebar area.nondisclosed_email@example.com (Pastor Rick)Sun, 30 Oct 2011 13:53:46 +0000