Runboard.com
You're welcome.

runboard.com       Sign up (learn about it) ● Sign in (lost password?)

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
 (Top of the page)
● Premium User ●


Registered: 07-2005
Location: Texas
Posts: 490
Karma: 12 (+12/-0)
Reply Quote
Basic CSS Right Sidebar (fixed width)


This 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.

---

RSFRDAdvertise Boards On TRDREITB
10/30/2011, 1:53 pm Link 2 this post Send Email to   Send PM to Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
 (Top of the page)
● Premium User ●


Registered: 07-2005
Location: Texas
Posts: 490
Karma: 12 (+12/-0)
Reply Quote
Re: Basic CSS Right Sidebar (fixed width)


Here 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:


--Log in or sign up to see linked image content--



---

RSFRDAdvertise Boards On TRDREITB
10/30/2011, 1:55 pm Link 2 this post Send Email to   Send PM to Blog
 


Add a Reply



You are not logged in (login)