Two column links and text : Siderbar « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » Siderbar 
Two column links and text
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="collin grasley - http://www.modetwentythree.com" />
<meta name="Keywords" content="key, words" />
<meta name="Distribution" content="Global" />
<meta name="Robots" content="index,follow" />
<style type='text/css'>
/* blog style template - collin grasley - modetwentythree.com - this work is public domain, enjoy!  */
/*  main styles ----------------------------*/
{
  margin: 0;
  padding: 0;
}


body {
  padding: 0;
  margin: 0;
  font: 0.69em Arial, Verdana, sans-serif;
  line-height: 1.64em;
  background: url(Blog-Style-images/bodybg.gifrepeat;
  color: #555;
}

{
  color: #222;
  background: inherit;
  text-decoration: none;
}

a:hover {
  color: #ff3399;
  background: none;
  text-decoration: none;
  border-bottom: 1px dashed;
}

{
  padding: 5px 0 5px 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  border: 0;
}

.clear {
  clear: both;
  margin-top: 1px;
}

#wrapper {
  margin: 0px auto;
  width: 900px;
  padding: 0 20px 0 20px;
  background: #fffbf4;
}

/* top ----------------------------*/
#topnav {
  height: 42px;
  background: #333;
  width: 100%;
}

#menu {
  float: right;
  height: 23px;
  margin: 8px 8px 0 0;
}

#menu a {
  display: block;
  color: #999;
  background: inherit;
  text-decoration: none;
  margin-right: 4px;
  line-height: 23px;
  font-weight: bold;
}

#menu a:hover {
  color: #ff3399;
  background: inherit;
}

#menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu li {
  float: left;
  margin: 0 0 0 5px;
}

/* header ----------------------------*/
#header {
  background: url(Blog-Style-images/header.jpgno-repeat;
  height: 180px;
  padding: 0;
  margin: 0 0 10px 0;
  clear: both;
}

#title {
  float: left;
  width: 340px;
  padding: 50px 0 10px 0;
  margin: 0 0 0 180px;
}

#header h1 {
  font-size: 3.9em;
  margin: 0 0 4px 20px;
}

#header h2 {
  font: 0.9em Arial, Sans-Serif;
  letter-spacing: 0;
  color: #868686;
  margin: 15px 0 0 20px;
  padding: 0;
}

.t1 {
  font-family: 'Impact';
  color: #ff3399;
}

.t2 {
  font-family: 'Impact';
  color: #333;
}

/*  The left column ----------------------------*/
#left {
  width: 190px;
  float: left;
  margin-right: 20px;
  padding: 0 5px 5px 5px;
  background: inherit;
}

#left ul {
  padding: 3px 0 12px 5px;
}

#left li {
  line-height: 18px;
  background: inherit;
  list-style: disc;
  margin-left: 16px;
  color: #ff3399;
}

#left li a {
  background: inherit;
  text-decoration: none;
}

#left li a:hover {
  text-decoration: none;
}

/*  The linkbar column ----------------------------*/
#linkbar {
  float: left;
  width: 190px;
  padding: 0 5px 5px 5px;
  margin-right: 20px;
  background: inherit;
}

#linkbar ul {
  padding: 3px 0 12px 5px;
}

#linkbar li {
  line-height: 18px;
  background: inherit;
  list-style: disc;
  margin-left: 8px;
  color: #ff3399;
}

#linkbar a {
  background: inherit;
  text-decoration: none;
}

#linkbar a:hover {
  text-decoration: none;
}

/*  The Right Side ----------------------------*/
#right {
  float: right;
  padding: 0;
  background: inherit;
  margin-bottom: 10px;
  width: 460px;
}

.content {
  padding: 10px 0 0 0;
}

#right img {
  float: left;
  padding: 0 10px 5px 0;
}

.comment_box {
  clear: both;
  padding: 7px 35px 0 0;
  margin: 10px 0 10px 0;
  text-align: right;
  background: url(Blog-Style-images/comment_box_bg.gifno-repeat top
    right;
  height: 32px;
}

.comment_box a {
  font: bold 1.2em Arial, Sans-Serif;
  color: #ff3399;
  background: transparent;
}

/*  The CSS for the Article headlines ----------------------------*/
.headline_one {
  font-size: 3.50em;
  line-height: .8em;
  color: #333;
  font-family: 'Impact';
}

.headline_two {
  font-size: 3.50em;
  line-height: .8em;
  color: #333;
  font-family: 'Impact';
  border-bottom: 4px solid #ff3399;
}

.headline_three {
  font-size: 1.3em;
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  border-bottom: #ff3399 2px solid;
}

.number {
  font-family: 'Impact';
  float: left;
  line-height: 1em;
  color: #ff3399;
  font-size: 4.0em;
  margin-right: 8px;
}

.headline_url {
  text-decoration: none;
  color: #999;
  font-weight: bold;
  font-size: 1.48em;
  line-height: 1.5em;
  text-transform: uppercase;
  padding-bottom: 3px;
}

.small_caps {
  color: #333;
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: 6px;
  padding-top: 1px;
}

/*  The CSS for the blockquote, this is XHTML valid --------------------------------------*/
{
  float: left;
  width: 14em;
  display: block;
  margin: 0.75em 0.75em 0 0;
  padding: 0.3em;
  border: 1px double #CCC;
  border-width: 2px 0;
  color: #333;
  background: none;
  text-align: left;
  font: italic 1.6em/1.7em Georgia;
}

/* footer ----------------------------*/
#footer {
  clear: both;
  width: 900px;
  margin: 0;
  padding: 10px 0 5px 0;
  border-top: 1px solid #333;
  background: inherit;
}
</style>


<title>BlogStyle</title>
</head>
<body>
<div id="wrapper">
<div id="topnav">
<div id="menu">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Articles">Articles</a></li>
<li><a href="#" title="Connect">Connect</a></li>
<li><a href="#" title="Affiliates">Links</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="Archives">Archives</a></li>
</ul>
</div>
</div>
<div id="header">
<div id="title">
<h1><a href="#" title=""><span class="t1">Blog</span> <span class="t2">Style</span></a></h1>
<h2>Tempor cum soluta nobis eleifend</h2>
</div>
</div>
<div class="clear"></div>
<div id="linkbar"><span class="headline_three">consectetuer elit</span><br />
<span class="small_caps">legunt saepius</span>
<ul>
<li><a href="#" title="tempor cum soluta nobis eleifend">tempor cum soluta nobis eleifend</a></li>
<li><a href="#" title="demonstraverunt lectores">demonstraverunt lectores</a></li>
<li><a href="#" title="Typi non habent claritatem">Typi non habent claritatem</a></li>
<li><a href="#" title="consectetuer adipiscing elit">consectetuer adipiscing elit</a></li>
<li><a href="#" title="tempor cum soluta nobis eleifend">tempor cum soluta nobis eleifend</a></li>
<li><a href="#" title="demonstraverunt lectores">demonstraverunt lectores</a></li>
<li><a href="#" title="Typi non habent claritatem">Typi non habent claritatem</a></li>
<li><a href="#" title="consectetuer adipiscing elit">consectetuer adipiscing elit</a></li>
</ul>
<span class="headline_three">Lorem dolor sit amet</span><br />
<span class="small_caps">demonstraverunt</span>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur <a href="#">mutationem consuetudium lectorum</a>. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas.</p>
<span class="headline_three">CSS Resources</span><br />
<span class="small_caps">legunt saepius</span>
<ul>
<li><a href="#" title="tempor cum soluta nobis eleifend">tempor cum soluta nobis eleifend</a></li>
<li><a href="#" title="demonstraverunt lectores">demonstraverunt lectores</a></li>
<li><a href="#" title="Typi non habent claritatem">Typi non habent claritatem</a></li>
<li><a href="#" title="consectetuer adipiscing elit">consectetuer adipiscing elit</a></li>
<li><a href="#" title="tempor cum soluta nobis eleifend">tempor cum soluta nobis eleifend</a></li>
<li><a href="#" title="demonstraverunt lectores">demonstraverunt lectores</a></li>
<li><a href="#" title="Typi non habent claritatem">Typi non habent claritatem</a></li>
<li><a href="#" title="consectetuer adipiscing elit">consectetuer adipiscing elit</a></li>
</ul>
<span class="headline_three">Lorem dolor sit amet</span><br />
<span class="small_caps">demonstraverunt</span>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur <a href="#">mutationem consuetudium lectorum</a>. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas.</p>
</div>
<div id="left"><span class="headline_three">Blogs in my network</span><br />
<span class="small_caps">In random order</span>
<ul>
<li><a href="http://fullahead.org/" title="Full Ahead">Full Ahead</a></li>
<li><a href="http://www.caperweb.com/08/" title="Caperweb Interactive">Caperweb Interactive</a></li>
<li><a href="http://jason-cole.com/" title="Jason Cole">Jason Cole</a></li>
<li><a href="http://me.mywebsight.ws/" title="Lobster man">Lobster man</a></li>
<li><a href="http://karenblundell.com/" title="Karen Blundell">Karen Blundell</a></li>
<li><a href="http://writeside.net/" title="Writeside">Writeside</a></li>
<li><a href="http://www.idunzo.com/" title="idunzo">idunzo</a></li>
<li><a href="http://www.attackr.com/" title="Attackr">Attackr</a></li>
<li><a href="http://www.growldesign.co.uk/" title="Growl design">Growl design</a></li>
<li><a href="http://www.edg3.co.uk/" title="Edg3">Edg3</a></li>
</ul>
<span class="headline_three">Lorem dolor sit amet</span><br />
<span class="small_caps">demonstraverunt</span>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur <a href="#">mutationem consuetudium lectorum</a>. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas.</p>
<span class="headline_three">consectetuer elit</span><br />
<span class="small_caps">legunt saepius</span>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</p>
<span class="headline_three">Lorem dolor sit amet</span><br />
<span class="small_caps">Mirum est notare</span>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur <a href="#">mutationem consuetudium lectorum</a>. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas.</p>
<span class="headline_three">consectetuer elit</span><br />
<span class="small_caps">Mirum est notare</span>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</p>
</div>
<div id="right">

<div class="content">

<span class="headline_one">Stop being fooled</span><br />
<span class="headline_two">by all the splashy headlines.</span><br />
<br />
<span class="number">.01 |</span> <a href="#" class="headline_url">Claritas est
etiam processus</a><br />
<span class="small_caps">Claritas est etiam processus</span>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet doloremagna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<q>Most people will read the information you have inside a pull quote... See, told ya so</q>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<div class="comment_box"><a href="#" title="#">Comments (9)</a>
</div>
</div>

<div class="content"><span class="headline_one">Mirum est notare quam</span><br />
<span class="headline_two"><em>tempor cum soluta nobis.</em></span><br />
<br />
<span class="number">.02 |</span> <a href="#" class="headline_url">putamus parum
claram</a><br />
<span class="small_caps">Mirum est notare quam</span>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet doloremagna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<q>Most people will read the information you have inside a pull quote... See, told ya so</q>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<div class="comment_box"><a href="#" title="#">Comments (21)</a></div>
</div>
</div>
<div id="footer">
<p><a href="#">home</a> | <a href="#">articles</a> | <a href="#">news</a> | <a href="#">connect</a> | <a href="#">links</a> | <a href="#">contact</a> | <a href="#">rss</a> | <a href="#">xhtml</a> | <a href="#">css</a></p>
<p><a href="http://www.modetwentythree.com" title="collin grasley">designed for the public domain by modetwentythree</a> 
| <a href="http://www.cssportal.com">CSS Portal</a></p>
</div>
</div>
</body>
</html>

   
    
    
  
Related examples in the same category
1.siderbar float right
2.Content floats left, side bar floats right
3.Sidebar with absolute position
4.Inner left and right bar
5.Sidebar with float left
6.Side bar contains list
7.side bar 2
8.Link bar with dotted line
9.Latest news sidebar
10.Sidebar with link and text
11.Sidebar with read more link
12.Text paragraph with sidebar
13.Sidebar with border
14.Div Sidebar padding: 0 38px 45px 29px;
15.Div Sidebar width: 328px;
16.Div Sidebar float: left;
17.Div based sidebar
18.Sidebar column
19.Sidebar with read more link 3
20.Layout for sidebar and article
21.Navigation sidebar
22.Two columns with sidebar
23.position: absolute; Sidebar
24.Sidebar Link list
25.Sidebar with right border
26.Links inside sidebar
27.Sidebar title
28.Sidebar with read more
29.Sidebar with around corner
30.Login form inside sidebar
31.Shading sidebar title
32.Using border to add boundary to the sidebar item
33.Sidebar with two columns
34.With link sidebar on both sides
35.Site news inside sidebar
36.Sidebar floating right
37.Sidebar Links with mouse hover effect
38.Using H4 as the sidebar section title
39.Sidebar li a:hover background:#94CC29;
40.Link side bar
41.Two column right link bar
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.