Two Column fixed with Layout with CSS - HTML Snipplr Social Repository

Revision: 26429

at April 28, 2010 02:21 by artaries

Updated Code

<div id="main_wrapper">
 <div id="header">
  <div id="header_inner">
   <a href="index.php?src"><h1>Company Name</h1></a>
  </div><!-- end header_inner -->
 </div><!-- end header -->
 <div id="nav">
  <div id="nav_inner">
   <ul>
    <li><a href="#">Nav item 1</a></li>
    <li><a href="#">Nav item 2</a></li>
   </ul>
  </div><!-- end nav_inner -->
 </div><!-- end nav -->
 <div id="content">
  <div id="content_inner">
   [[Content]]
  </div><!-- end content_inner -->
 </div><!-- end content -->
 <div id="footer">
  <div id="footer_inner">
   [[layout.webpage_footer]]
  </div><!-- end footer_inner -->
 </div><!-- end footer -->
</div><!--end main wrapper-->

/* CSS */
body {	text-align: center; }
#main_wrapper {	width: 960px; margin-left: auto; margin-right: auto; text-align: left; }

#header { height: 120px; background: transparent url(graphics/logo.jpg) no-repeat top left; }
#header a { width: 145px; height: 120px; display: block; }
#header h1 { display: none; }
#header_inner { }

#nav { width: 22%; float: left; }
#nav_inner { padding:1em 1.2em; border-right:3px solid #666; }

#content { width: 78%; float: left; top: 0px; }
#content h1, #content a { color: #437fb1; }
#content_inner { padding:2em 6em 1em 3.5em; }

#footer { clear:both; }
#footer_inner { padding:.5em 1em; }

Revision: 26428

at April 28, 2010 02:20 by artaries

Updated Code

<div id="main_wrapper">
 <div id="header">
  <div id="header_inner">
   <a href="index.php?src"><h1>Company Name</h1></a>
  </div><!-- end header_inner -->
 </div><!-- end header -->
 <div id="nav">
  <div id="nav_inner">
   <ul>
    <li><a href="#">Nav item 1</a></li>
    <li><a href="#">Nav item 2</a></li>
   </ul>
  </div><!-- end nav_inner -->
 </div><!-- end nav -->
 <div id="content">
  <div id="content_inner">
   [[Content]]
  </div><!-- end content_inner -->
 </div><!-- end content -->
 <div id="footer">
  <div id="footer_inner">
   [[layout.webpage_footer]]
  </div><!-- end footer_inner -->
 </div><!-- end footer -->
</div><!--end main wrapper-->

/* CSS */
body {	tex-align: center; }
#main_wrapper {	width: 960px; margin-left: auto; margin-right: auto; text-align: left; }

#header { height: 120px; background: transparent url(graphics/logo.jpg) no-repeat top left; }
#header a { width: 145px; height: 120px; display: block; }
#header h1 { display: none; }
#header_inner { }

#nav { width: 22%; float: left; }
#nav_inner { padding:1em 1.2em; border-right:3px solid #666; }

#content { width: 78%; float: left; top: 0px; }
#content h1, #content a { color: #437fb1; }
#content_inner { padding:2em 6em 1em 3.5em; }

#footer { clear:both; }
#footer_inner { padding:.5em 1em; }

Revision: 26427

at April 28, 2010 02:16 by artaries

Updated Code

<div id="main_wrapper">
 <div id="header">
  <div id="header_inner">
   <a href="index.php?src"><h1>Blumen Keusch AG</h1></a>
  </div><!-- end header_inner -->
 </div><!-- end header -->
 <div id="nav">
  <div id="nav_inner">
   <ul>
    <li><a href="#">Nav item 1</a></li>
    <li><a href="#">Nav item 2</a></li>
   </ul>
  </div><!-- end nav_inner -->
 </div><!-- end nav -->
 <div id="content">
  <div id="content_inner">
   [[Content]]
  </div><!-- end content_inner -->
 </div><!-- end content -->
 <div id="footer">
  <div id="footer_inner">
   [[layout.webpage_footer]]
  </div><!-- end footer_inner -->
 </div><!-- end footer -->
</div><!--end main wrapper-->

/* CSS */
body {	tex-align: center; }
#main_wrapper {	width: 960px; margin-left: auto; margin-right: auto; text-align: left; }

#header { height: 120px; background: transparent url(graphics/logo.jpg) no-repeat top left; }
#header a { width: 145px; height: 120px; display: block; }
#header h1 { display: none; }
#header_inner { }

#nav { width: 22%; float: left; }
#nav_inner { padding:1em 1.2em; border-right:3px solid #666; }

#content { width: 78%; float: left; top: 0px; }
#content h1, #content a { color: #437fb1; }
#content_inner { padding:2em 6em 1em 3.5em; }

#footer { clear:both; }
#footer_inner { padding:.5em 1em; }

Revision: 26426

at April 28, 2010 02:15 by artaries

Updated Code

<div id="main_wrapper">
 <div id="header">
  <div id="header_inner">
   <h1>Header</h1>
  </div><!-- end header_inner -->
 </div><!-- end header -->
 <div id="nav">
  <div id="nav_inner">
   <ul>
    <li><a href="#">Nav item 1</a></li>
    <li><a href="#">Nav item 2</a></li>
   </ul>
  </div><!-- end nav_inner -->
 </div><!-- end nav -->
 <div id="content">
  <div id="content_inner">
   [[Content]]
  </div><!-- end content_inner -->
 </div><!-- end content -->
 <div id="footer">
  <div id="footer_inner">
   [[layout.webpage_footer]]
  </div><!-- end footer_inner -->
 </div><!-- end footer -->
</div><!--end main wrapper-->

/* CSS */
body {	tex-align: center; }
#main_wrapper {	width: 960px; margin-left: auto; margin-right: auto; text-align: left; }

#header { height: 120px; background: transparent url(graphics/logo.jpg) no-repeat top left; }
#header a { width: 145px; height: 120px; display: block; }
#header h1 { display: none; }
#header_inner { }

#nav { width: 22%; float: left; }
#nav_inner { padding:1em 1.2em; border-right:3px solid #666; }

#content { width: 78%; float: left; top: 0px; }
#content h1, #content a { color: #437fb1; }
#content_inner { padding:2em 6em 1em 3.5em; }

#footer { clear:both; }
#footer_inner { padding:.5em 1em; }

Revision: 26425

at April 28, 2010 02:04 by artaries

Updated Code

<div id="main_wrapper">
 <div id="header">
  <div id="header_inner">
   <h1>Header</h1>
  </div><!-- end header_inner -->
 </div><!-- end header -->
 <div id="nav">
  <div id="nav_inner">
   <ul>
    <li><a href="#">Nav item 1</a></li>
    <li><a href="#">Nav item 2</a></li>
   </ul>
  </div><!-- end nav_inner -->
 </div><!-- end nav -->
 <div id="content">
  <div id="content_inner">
   [[Content]]
  </div><!-- end content_inner -->
 </div><!-- end content -->
 <div id="footer">
  <div id="footer_inner">
   [[layout.webpage_footer]]
  </div><!-- end footer_inner -->
 </div><!-- end footer -->
</div><!--end main wrapper-->

/* CSS */
body {	tex-align: center; }
#main_wrapper {	width: 960px; margin-left: auto; margin-right: auto; text-align: left; }

#header { height: 107px; background: transparent url(graphics/....jpg) no-repeat top left; }
#header a { width: 950px; height: 107px; display: block; }
#header h1 { display: none; }
#header_inner { padding:1em 2em; }

#nav { width: 22%; float: left; }
#nav_inner { padding:1em 1.2em; border-right:3px solid #666; }

#content { width: 78%; float: left; top: 0px; }
#content h1, #content a { color: #437fb1; }
#content_inner { padding:2em 6em 1em 3.5em; }

#footer { clear:both; }
#footer_inner { padding:.5em 1em; }

Revision: 26424

at April 28, 2010 02:00 by artaries

Updated Code

<div id="main_wrapper">
 <div id="header">
  <div id="header_inner">
   <h1>Header</h1>
  </div><!-- end header_inner -->
 </div><!-- end header -->
 <div id="nav">
  <div id="nav_inner">
   <ul>
    <li><a href="#">Nav item 1</a></li>
    <li><a href="#">Nav item 2</a></li>
   </ul>
  </div><!-- end nav_inner -->
 </div><!-- end nav -->
 <div id="content">
  <div id="content_inner">
   [[Content]]
  </div><!-- end content_inner -->
 </div><!-- end content -->
 <div id="footer">
  <div id="footer_inner">
   [[layout.webpage_footer]]
  </div><!-- end footer_inner -->
 </div><!-- end footer -->
</div><!--end main wrapper-->

/* CSS */
body {	tex-align: center; }
#main_wrapper {	width: 960px; margin-left: auto; margin-right: auto; text-align: left; }
#header { }
#nav { width: 22%; float: left; }
#content { width: 78%; float: left; top: 0px; }
#footer { clear:both; }
#header_inner { padding:1em 2em; }
#nav_inner { padding:1em 1.2em; border-right:3px solid #666; }
#content_inner { padding:2em 6em 1em 3.5em; }
#footer_inner { padding:.5em 1em; }

Revision: 26423

at April 28, 2010 01:55 by artaries

Initial Code

<div id="main_wrapper">
 <div id="header">
  <div id="header_inner">
   <h1>Header</h1>
  </div><!-- end header_inner -->
 </div><!-- end header -->
 <div id="nav">
  <div id="nav_inner">
   <ul>
    <li><a href="#">Nav item 1</a></li>
    <li><a href="#">Nav item 2</a></li>
   </ul>
  </div><!-- end nav_inner -->
 </div><!-- end nav -->
 <div id="content">
  <div id="content_inner">
   [[Content]]
  </div><!-- end content_inner -->
 </div><!-- end content -->
 <div id="footer">
  <div id="footer_inner">
   [[layout.webpage_footer]]
  </div><!-- end footer_inner -->
 </div><!-- end footer -->
</div><!--end main wrapper-->

/* CSS */
body {	background:#BB9; }
#main_wrapper {	background:#EEF; }
#header { background:#DDC; }
#nav { background:#CCB; }
#content { background:#EED; }
#footer { clear:both; /* makes the footer sit bbeloow whichever column is longest */ background:#DDC; /* TEMP - REMOVE OR RESTYLE  */ }
#header_inner { padding:1em 2em; /* creates space between the div  and the content */ }
#nav_inner { padding:1em 1.2em; /* creates space between the box and the content */ border-right:3px solid #666; }
#content_inner { padding:2em 6em 1em 3.5em; /* creates space between the box and the content */ }
#footer_inner { padding:.5em 1em; /* creates space between the box and the content */ }

Initial URL

Initial Description

Initial Title

Two Column fixed with Layout with CSS

Initial Tags

css, html

Initial Language

HTML

Choose a language for easy browsing: