Text paragraph with sidebar : Siderbar « CSS Controls « HTML / CSS

Text paragraph with sidebar

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Business 2007</title>
<style type='text/css'>
body   {background:#2765AF url('Business-Design-2007-images/body_bg.jpg') repeat-x 0 0; color:#000000; margin:20px 0; padding:0; font-family:"Trebuchet MS", verdana, arial, "Times New Roman", serif; font-size:90%; }
p    {margin:0; padding:0 0 15px 0; }
a    {color:#000000; text-decoration:underline; }
a:hover  {color:#225799; text-decoration:none;}

/*structural elements*/
#container  {margin:0px auto; text-align:center; width:760px; }
#holder    {width:100%; padding:20px 20px 5px 20px; background:#FFFFFF; text-align:left; }
#logo    {background:url('Business-Design-2007-images/logo.gif') no-repeat 180px 0; border-bottom:1px solid #DADADA; padding:5px 30px 20px 0px; }
#header    {background:#DADADA url('Business-Design-2007-images/header_home.jpg') no-repeat 10px 10px; padding:10px; height:200px; }
#content  {float:left; width:490px; padding:20px 10px 0 0; line-height:160%; }
#news    {float:right; width:250px; padding:20px 0; line-height:140%; text-align:justify; }
.newsItem  {padding:20px 20px 5px 20px; background:#FEFFD5; border:1px solid #FFEB70; font-size:90%; margin-bottom:20px; }
#footer    {clear:both; width:100%; font-size:80%; background:#DADADA; padding:20px 20px 5px 20px; border-top:2px solid #2765AF; }

.newsItem h3  {color:#225799; margin:0 0 10px 0; padding:0; font-size:130%; font-weight:normal; }
#content h1    {font-size:170%; font-weight:normal; line-height:130%; margin:0; padding:0 0 20px 0; }
#logo h1    {font-weight:normal; font-size:170%; margin:0; padding:0; color:#225799; }

ul#navigation        {margin:0; padding:10px 0; }
ul#navigation li     {margin:0; padding:0; list-style:none; display:inline; }
ul#navigation a      {color:#225799; padding:0 20px 0 0; text-decoration:none; }
ul#navigation a:hover  {color:#000000; text-decoration:underline; }

#home #homeLink,
#about #aboutLink,
#technology #technologyLink,
#portfolio #portfolioLink,
#partners #partnersLink,
#contact #contactLink,
#jobs #jobsLink
{text-decoration:underline; }

/*footer styling, pre-styled so you can "whack" another navigation menu in there if you like*/
#footer ul     {margin:0; padding:0; }
#footer li     {margin:0; padding:0; list-style:none; display:inline; }
#footer a    {color:#000000; font-weight:bold; text-decoration:underline; }
#footer a:hover  {color:#000000; text-decoration:none; }

/*shamelessly borrowed styles from http://www.positioniseverything.net/easyclearing.html*/
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix {height:1%; }
.clearfix {display:block; }
/* End hide from IE-mac */

<meta name="Author" content="Tjobbe Andrews, SiteCreative.net" />

<body id="home">
<div id="container">
  <div id="holder" class="clearfix">
    <div id="logo">
      <h1>Business Design</h1>
    <ul id="navigation">
      <li><a id="homeLink" href="#">HOME</a></li>
      <li><a id="aboutLink" href="#">ABOUT US</a></li>
      <li><a id="technologyLink" href="#">TECHNOLOGY SOLUTIONS</a></li>
      <li><a id="portfolioLink" href="#">PORTFOLIO</a></li>
      <li><a id="partnersLink" href="#">STRATEGIC PARTNERS</a></li>
      <li><a id="contactLink" href="#">CONTACT</a></li>
      <li><a id="jobsLink" href="#">JOBS</a></li>
    <div id="header"></div>
    <div id="content">
      <h1>Business Design 2007. Propelling your business into the 21st Century with a fresh, clean Web site template.</h1>
      <p>A nice clean design with no <a href="http://validator.w3.org/check?uri=referer">HTML Validation errors</a> and no <a href="http://jigsaw.w3.org/css-validator/validator?profile=css2&amp;warning=2&amp;uri=http%3A%2F%2Fwww.sitecreative.net%2Fportfolio%2Fbusiness2007%2F">CSS error</a>s. The focus with this design was to create something professional with a modern feel. The coding is of a good standard, and should be relatively easy to decipher even with limited HTML experience.</p>
      <p>My previous designs, under the guise of NOWdesign at various Open Source Web design template sites, has led to over fifty thousand downloads. This design itself is intended to replace the most popular of those designs, 'Business Design' (<a href="http://www.oswd.org/design/preview/id/1965/">oswd.org</a> &amp; <a href="http://www.openwebdesign.org/viewdesign.phtml?id=1965&amp;referer=%2Fbrowse.php%3Fpage%3D1%26sort%3Ddownloadsdesc">OpenWebDesign.org</a>), which is currently in the top ten of most downloaded all time.</p>
      <p>My name is <a href="http://www.farstyle.com">Tjobbe Andrews</a>, my portfolio site at <a href="http://www.sitecreative.net">Site Creative</a> has more templates. For information about me, visit my <a href="http://www.farstyle.com">personal Web site</a>.</p>
      <p>You should know that the photo used at the top of the page may not be open source. I honestly can not remember where I got it from although I believe it was <a href="http://www.sxc.hu">www.sxc.hu</a> - although I can no longer find it on there. I assume no responsibility for the use of the image.</p>
      <p>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>.</p>
    <div id="news">
      <div class="newsItem">
        <p><strong>This design is free</strong>. But please respect that I worked hard on it and would appreciate a link back to <a href="http://www.sitecreative.net/">my site</a>.</p>
        <p><strong>To make it easier for you</strong> I have made the footer (box at the bottom of the page) say what I would like it to, feel free to change it to what you like though.</p>
      <div class="newsItem">
        <h3>Other info</h3>
        <p><strong>Enjoy the design!</strong> It's aimed at small companies who want to keep their costs down by getting a ready made template. If you would like to get in touch with me about potential projects, please get in touch via my <a href="http://www.sitecreative.net/">company Web site</a>.</p>
  <div id="footer">
    <p>Design released by <a href="http://www.farstyle.com">FarStyle</a> via the studio of <a href="http://www.sitecreative.net/">Site Creative</a> 
    | <a href="http://www.ehostinfo.com/">Web Hosting</a>. 2008 Site Creative.</p>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Technology Solutions</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Strategic Partners</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Jobs</a></li>


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.Sidebar with border
13.Div Sidebar padding: 0 38px 45px 29px;
14.Div Sidebar width: 328px;
15.Div Sidebar float: left;
16.Div based sidebar
17.Sidebar column
18.Sidebar with read more link 3
19.Layout for sidebar and article
20.Navigation sidebar
21.Two columns with sidebar
22.position: absolute; Sidebar
23.Sidebar Link list
24.Sidebar with right border
25.Links inside sidebar
26.Sidebar title
27.Sidebar with read more
28.Sidebar with around corner
29.Login form inside sidebar
30.Shading sidebar title
31.Using border to add boundary to the sidebar item
32.Sidebar with two columns
33.With link sidebar on both sides
34.Site news inside sidebar
35.Sidebar floating right
36.Sidebar Links with mouse hover effect
37.Using H4 as the sidebar section title
38.Sidebar li a:hover background:#94CC29;
39.Link side bar
40.Two column links and text
41.Two column right link bar