SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Minnesota
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 column layout with side column same height as header

    hi, i have 2 and 3 column layout examples to play with. But the examples I have seen all have the header across the entire top. I want to have a 3 column layout like the attached image shows with a right column at the same height as the header (but above the footer). Columns 1 & 2 sit between the header/footer. I would also like one background color for columns 1 & 2 (and I will be putting in rounded corners). Does anyone know any examples of this format? Columns 1 & 3 can be fixed width.

    Thank-you,
    Tony
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast winthan's Avatar
    Join Date
    Jun 2007
    Location
    Heaven in the Earth
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't download your attachments file!

    sorry for it.

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Minnesota
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, my image still says "pending approval". I put it up on a friends page here: http://peteryork.home.mchsi.com/layout.gif

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Thanks,
    that was kind of fun, I hope I understood your description accurately.

    Fixed width sidebars:
    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    #wrapper {width: 100&#37;; overflow: auto; background: #999900;}
    .inner {float: left; width: 100%; padding-left: 200px; margin-left: -200px; margin-right: -100%; background: #3D6BA5}
    #right {float: right; width: 200px; background: #D1D636}
    #header { margin-right: 200px;  background: #CC3300;}
    #footer {width: 100%; clear: both; background: #CC6633;}
    #left { float: left; width: 200px; background: #9BCDE6}
    #content {margin-left: 200px; margin-right: 200px; background:#FF9933;}
    
    /* extra stuff */
    #content, #left, #right { padding-bottom: 20px}
    h1, h2, h3, p {padding: 1em 20px 0 20px}
    h1 {padding-bottom: 1em}
    ul {padding-left: 45px;}
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div class="inner">
        <div id="header">
          <h1>Oddball layout - What's the right column doing up there? </h1>
        </div>
        <div id="left">
          <h2>Left Column</h2>
          <ul id="menu">
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
          </ul>
        </div>
        <div id="content">
          <h2>Content</h2>
          <div id="lipsum">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam  vestibulum, dui sed semper mollis, magna nisi egestas dui, ut tempus  ipsum velit et magna. Nulla tempor, ligula id condimentum dapibus,  massa elit ullamcorper libero, nec rutrum eros nisl ac elit. Integer  elementum eros vitae lorem. Cras hendrerit sem. In eu justo eu nulla  tempor condimentum. Fusce dolor lacus, pretium vitae, dictum vel,  semper quis, magna. Maecenas ante lacus, tincidunt eget, interdum ut,  interdum a, nibh. Ut eu est. Cras ante. Donec sed ipsum. Phasellus  rhoncus ante. Sed ipsum. Suspendisse potenti. In nec massa elementum mi  sollicitudin aliquam. Sed accumsan sem a pede. Suspendisse nibh.  Suspendisse potenti. Fusce erat magna, eleifend imperdiet, scelerisque  quis, bibendum lacinia, urna. Maecenas volutpat, nunc in laoreet  malesuada, risus eros bibendum turpis, tincidunt commodo augue nisi in  nibh. Ut mollis. </p>
            <p>Praesent vehicula lacus id turpis. In euismod ornare lorem. Donec  vitae mi in augue vulputate iaculis. Mauris dictum, ante at suscipit  vestibulum, lectus lacus blandit lorem, quis scelerisque quam urna a  tortor. Vestibulum metus metus, congue molestie, interdum non, gravida  vitae, nisi. Praesent tincidunt ornare metus. Duis enim. Quisque pede.  Nullam feugiat enim ac tortor. Vestibulum ante ipsum primis in faucibus  orci luctus et ultrices posuere cubilia Curae; Ut magna. Suspendisse  sed purus eu enim interdum convallis. </p>
            <p>Nullam rutrum. Morbi adipiscing malesuada massa. Integer diam felis,  feugiat in, auctor sit amet, pretium at, nisl. Vestibulum est. Praesent  eu augue. Praesent pulvinar. Fusce eget arcu. Etiam volutpat. In  aliquam nunc sit amet ipsum. Nulla dapibus pede ut massa. Integer et  erat id massa vehicula molestie. Suspendisse consectetuer diam et diam.  Vestibulum vulputate. Fusce quam est, lobortis quis, vehicula vitae,  condimentum ac, mi. Pellentesque in quam at nunc aliquam gravida.  Integer vel odio. Nullam scelerisque pellentesque augue. Mauris  dignissim neque non tortor. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Donec urna. Nam eget sapien. Nunc consequat  velit eu mauris. Donec purus sapien, fermentum quis, sodales sed,  placerat non, lorem. Etiam mollis nonummy enim. Donec quis ipsum. Duis  vitae enim. Maecenas nec orci. Sed tristique rutrum velit. </p>
            <p>Nunc lectus dolor, aliquam sit amet, luctus eget, sagittis eget,  diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem  ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus semper  pretium felis. Nullam iaculis, lectus ac pulvinar hendrerit, velit  magna mollis lorem, sed pulvinar neque orci sed nunc. Aliquam tempus  velit nec mi. Duis dignissim molestie ante. Curabitur a nisi vel ipsum  sollicitudin tincidunt. Morbi massa neque, dignissim interdum,  venenatis a, scelerisque id, odio. Integer bibendum adipiscing neque.  Curabitur tortor nisi, nonummy eu, dictum a, hendrerit sed, nisi.  Integer at orci. Suspendisse potenti. Sed ut tortor. Suspendisse vitae  leo a metus dapibus dictum. Praesent ullamcorper accumsan odio.  Maecenas sagittis lorem. Suspendisse rutrum pede non purus. </p>
          </div>
        </div>
      </div>
      <div id="right">
        <h2>Right Column</h2>
        <ul id="right_menu">
          <li><a href="#">asdf</a></li>
          <li><a href="#">asdf</a></li>
          <li><a href="#">asdf</a></li>
          <li><a href="#">asdf</a></li>
          <li><a href="#">asdf</a></li>
        </ul>
      </div>
    </div>
    <div id="footer">
      <h2>Footer</h2>
    </div>
    </body>
    </html>
    Last edited by markbrown4; Jun 16, 2007 at 21:20.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    fluid width sidebars:
    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    #wrapper {width: 100&#37;; overflow: auto; background: #999900;}
    .inner {float: left; width: 80%; background: #3D6BA5}
    #right {float: right; width: 20%; background: #D1D636}
    #header { background: #CC3300;}
    #footer {width: 100%; clear: both; background: #CC6633;}
    #left { float: left; width: 20%; background: #9BCDE6}
    #content {margin-left: 20%; background:#FF9933;}
    
    /* extra stuff */
    #content, #left, #right { padding-bottom: 20px}
    h1, h2, h3, p {padding: 1em 20px 0 20px}
    h1 {padding-bottom: 1em}
    ul {padding-left: 45px;}
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div class="inner">
        <div id="header">
          <h1>Oddball layout - What's the right column doing up there? </h1>
        </div>
        <div id="left">
    	  <h2>Left Column</h2>
          <ul id="menu">
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
          </ul>
        </div>
        <div id="content">
          <h2>Content</h2>
          <div id="lipsum">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam  vestibulum, dui sed semper mollis, magna nisi egestas dui, ut tempus  ipsum velit et magna. Nulla tempor, ligula id condimentum dapibus,  massa elit ullamcorper libero, nec rutrum eros nisl ac elit. Integer  elementum eros vitae lorem. Cras hendrerit sem. In eu justo eu nulla  tempor condimentum. Fusce dolor lacus, pretium vitae, dictum vel,  semper quis, magna. Maecenas ante lacus, tincidunt eget, interdum ut,  interdum a, nibh. Ut eu est. Cras ante. Donec sed ipsum. Phasellus  rhoncus ante. Sed ipsum. Suspendisse potenti. In nec massa elementum mi  sollicitudin aliquam. Sed accumsan sem a pede. Suspendisse nibh.  Suspendisse potenti. Fusce erat magna, eleifend imperdiet, scelerisque  quis, bibendum lacinia, urna. Maecenas volutpat, nunc in laoreet  malesuada, risus eros bibendum turpis, tincidunt commodo augue nisi in  nibh. Ut mollis. </p>
            <p>Praesent vehicula lacus id turpis. In euismod ornare lorem. Donec  vitae mi in augue vulputate iaculis. Mauris dictum, ante at suscipit  vestibulum, lectus lacus blandit lorem, quis scelerisque quam urna a  tortor. Vestibulum metus metus, congue molestie, interdum non, gravida  vitae, nisi. Praesent tincidunt ornare metus. Duis enim. Quisque pede.  Nullam feugiat enim ac tortor. Vestibulum ante ipsum primis in faucibus  orci luctus et ultrices posuere cubilia Curae; Ut magna. Suspendisse  sed purus eu enim interdum convallis. </p>
            <p>Nullam rutrum. Morbi adipiscing malesuada massa. Integer diam felis,  feugiat in, auctor sit amet, pretium at, nisl. Vestibulum est. Praesent  eu augue. Praesent pulvinar. Fusce eget arcu. Etiam volutpat. In  aliquam nunc sit amet ipsum. Nulla dapibus pede ut massa. Integer et  erat id massa vehicula molestie. Suspendisse consectetuer diam et diam.  Vestibulum vulputate. Fusce quam est, lobortis quis, vehicula vitae,  condimentum ac, mi. Pellentesque in quam at nunc aliquam gravida.  Integer vel odio. Nullam scelerisque pellentesque augue. Mauris  dignissim neque non tortor. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Donec urna. Nam eget sapien. Nunc consequat  velit eu mauris. Donec purus sapien, fermentum quis, sodales sed,  placerat non, lorem. Etiam mollis nonummy enim. Donec quis ipsum. Duis  vitae enim. Maecenas nec orci. Sed tristique rutrum velit. </p>
            <p>Nunc lectus dolor, aliquam sit amet, luctus eget, sagittis eget,  diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem  ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus semper  pretium felis. Nullam iaculis, lectus ac pulvinar hendrerit, velit  magna mollis lorem, sed pulvinar neque orci sed nunc. Aliquam tempus  velit nec mi. Duis dignissim molestie ante. Curabitur a nisi vel ipsum  sollicitudin tincidunt. Morbi massa neque, dignissim interdum,  venenatis a, scelerisque id, odio. Integer bibendum adipiscing neque.  Curabitur tortor nisi, nonummy eu, dictum a, hendrerit sed, nisi.  Integer at orci. Suspendisse potenti. Sed ut tortor. Suspendisse vitae  leo a metus dapibus dictum. Praesent ullamcorper accumsan odio.  Maecenas sagittis lorem. Suspendisse rutrum pede non purus. </p>
          </div>
        </div>
      </div>
      <div id="right">
        <h2>Right Column</h2>
    	<ul id="right_menu">
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
        </ul>
        <p>&nbsp;</p>
      </div>
    </div>
    <div id="footer">
      <h2>Footer</h2>
    </div>
    </body>
    </html>
    Last edited by markbrown4; Jun 16, 2007 at 21:20.

  6. #6
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Minnesota
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that is great, thank-you so much again Mark.

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    No problem

  8. #8
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Minnesota
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To modify and add a second left column (beneath left) is the code below ok Mark (see #left2)?

    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    #wrapper {width: 100&#37;; overflow: auto; background: #999900;}
    .inner {float: left; width: 100%; padding-left: 200px; margin-left: -200px; margin-right: -100%; background: #3D6BA5}
    #right {float: right; width: 200px; background: #D1D636}
    #header { margin-right: 200px; background: #CC3300;}
    #footer {width: 100%; clear: both; background: #CC6633;}
    #left { float: left; width: 200px; background: #9BCDE6}
    #left2 {clear:left;float:left; width:200px; background: #FFFF00;}
    #content {margin-left: 200px; margin-right: 200px; background:#FF9933;}




    /* extra stuff */
    #content, #left, #right { padding-bottom: 20px}
    h1, h2, h3, p {padding: 1em 20px 0 20px}
    h1 {padding-bottom: 1em}
    ul {padding-left: 45px;}
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div class="inner">

    <div id="header">
    <h1>Oddball layout - What's the right column doing up there? </h1>
    </div> <!-- end header -->

    <div id="left">
    <h2>Left Column</h2>
    <ul id="menu">
    <li><a href="#">asdf</a></li>
    <li><a href="#">asdf</a></li>
    <li><a href="#">asdf</a></li>
    <li><a href="#">asdf</a></li>
    <li><a href="#">asdf</a></li>
    </ul>
    </div> <!-- end left -->

    <div id="left2">
    <h2>Second Left Column</h2>
    <p>This should appear beneath the first left column</p>
    <p>This should appear beneath the first left column</p>
    <p>This should appear beneath the first left column</p>
    <p>This should appear beneath the first left column</p>
    </div> <!-- end left2 -->


    <div id="content">
    <h2>Content</h2>
    <div id="lipsum">
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vestibulum, dui sed semper mollis, magna nisi egestas dui, ut tempus ipsum velit et magna. Nulla tempor, ligula id condimentum dapibus, massa elit ullamcorper libero, nec rutrum eros nisl ac elit. Integer elementum eros vitae lorem. Cras hendrerit sem. In eu justo eu nulla tempor condimentum. Fusce dolor lacus, pretium vitae, dictum vel, semper quis, magna. Maecenas ante lacus, tincidunt eget, interdum ut, interdum a, nibh. Ut eu est. Cras ante. Donec sed ipsum. Phasellus rhoncus ante. Sed ipsum. Suspendisse potenti. In nec massa elementum mi sollicitudin aliquam. Sed accumsan sem a pede. Suspendisse nibh. Suspendisse potenti. Fusce erat magna, eleifend imperdiet, scelerisque quis, bibendum lacinia, urna. Maecenas volutpat, nunc in laoreet malesuada, risus eros bibendum turpis, tincidunt commodo augue nisi in nibh. Ut mollis. </p>
    <p>Praesent vehicula lacus id turpis. In euismod ornare lorem. Donec vitae mi in augue vulputate iaculis. Mauris dictum, ante at suscipit vestibulum, lectus lacus blandit lorem, quis scelerisque quam urna a tortor. Vestibulum metus metus, congue molestie, interdum non, gravida vitae, nisi. Praesent tincidunt ornare metus. Duis enim. Quisque pede. Nullam feugiat enim ac tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut magna. Suspendisse sed purus eu enim interdum convallis. </p>
    <p>Nullam rutrum. Morbi adipiscing malesuada massa. Integer diam felis, feugiat in, auctor sit amet, pretium at, nisl. Vestibulum est. Praesent eu augue. Praesent pulvinar. Fusce eget arcu. Etiam volutpat. In aliquam nunc sit amet ipsum. Nulla dapibus pede ut massa. Integer et erat id massa vehicula molestie. Suspendisse consectetuer diam et diam. Vestibulum vulputate. Fusce quam est, lobortis quis, vehicula vitae, condimentum ac, mi. Pellentesque in quam at nunc aliquam gravida. Integer vel odio. Nullam scelerisque pellentesque augue. Mauris dignissim neque non tortor. </p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec urna. Nam eget sapien. Nunc consequat velit eu mauris. Donec purus sapien, fermentum quis, sodales sed, placerat non, lorem. Etiam mollis nonummy enim. Donec quis ipsum. Duis vitae enim. Maecenas nec orci. Sed tristique rutrum velit. </p>
    <p>Nunc lectus dolor, aliquam sit amet, luctus eget, sagittis eget, diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus semper pretium felis. Nullam iaculis, lectus ac pulvinar hendrerit, velit magna mollis lorem, sed pulvinar neque orci sed nunc. Aliquam tempus velit nec mi. Duis dignissim molestie ante. Curabitur a nisi vel ipsum sollicitudin tincidunt. Morbi massa neque, dignissim interdum, venenatis a, scelerisque id, odio. Integer bibendum adipiscing neque. Curabitur tortor nisi, nonummy eu, dictum a, hendrerit sed, nisi. Integer at orci. Suspendisse potenti. Sed ut tortor. Suspendisse vitae leo a metus dapibus dictum. Praesent ullamcorper accumsan odio. Maecenas sagittis lorem. Suspendisse rutrum pede non purus. </p>
    </div> <!-- end lipsum -->
    </div> <!-- end content -->
    </div> <!-- end inner -->

    <div id="right">
    <h2>Right Column</h2>
    <ul id="right_menu">
    <li><a href="#">asdf</a></li>
    <li><a href="#">asdf</a></li>
    <li><a href="#">asdf</a></li>
    <li><a href="#">asdf</a></li>
    <li><a href="#">asdf</a></li>
    </ul>

    <p>more text here</p>
    <p>more text here</p>
    <p>more text here</p>
    <p>more text here</p>
    <p>more text here</p>
    </div> <!-- end right -->
    </div> <!-- end wrapper -->
    <div id="footer">
    <h2>Footer</h2>
    </div> <!-- end footer -->
    </body>
    </html>

  9. #9
    SitePoint Enthusiast winthan's Avatar
    Join Date
    Jun 2007
    Location
    Heaven in the Earth
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should better view this link

    http://blog.html.it/layoutgala/

    I hope you may like it...

  10. #10
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Minnesota
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank-you Winthan. That is a great site.

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    It's probably a little more complicated than it need be, you can just place it within #left, and give it a different background.
    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    #wrapper {width: 100&#37;; overflow: auto; background: #999900;}
    .inner {float: left; width: 100%; padding-left: 200px; margin-left: -200px; margin-right: -100%; background: #3D6BA5}
    #right {float: right; width: 200px; background: #D1D636}
    #header { margin-right: 200px; background: #CC3300;}
    #footer {width: 100%; clear: both; background: #CC6633;}
    #left { float: left; width: 200px; background: #9BCDE6}
    #left2 { background: #FFFF00;}
    #content {margin-left: 200px; margin-right: 200px; background:#FF9933;}
    
    /* extra stuff */
    #content, #left2, #right { padding-bottom: 20px}
    #left2 {margin-top:20px;}
    h1, h2, h3, p {padding: 1em 20px 0 20px}
    h1 {padding-bottom: 1em}
    ul {padding-left: 45px;}
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div class="inner">
        <div id="header">
          <h1>Oddball layout - What's the right column doing up there? </h1>
        </div>
        <!-- end header -->
        <div id="left">
          <h2>Left Column</h2>
          <ul id="menu">
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
            <li><a href="#">asdf</a></li>
          </ul>
          <div id="left2">
            <h2>Second Left Column</h2>
            <p>This should appear beneath the first left column</p>
            <p>This should appear beneath the first left column</p>
            <p>This should appear beneath the first left column</p>
            <p>This should appear beneath the first left column</p>
          </div>
          <!-- end left2 -->
        </div>
        <!-- end left -->
        <div id="content">
          <h2>Content</h2>
          <div id="lipsum">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vestibulum, dui sed semper mollis, magna nisi egestas dui, ut tempus ipsum velit et magna. Nulla tempor, ligula id condimentum dapibus, massa elit ullamcorper libero, nec rutrum eros nisl ac elit. Integer elementum eros vitae lorem. Cras hendrerit sem. In eu justo eu nulla tempor condimentum. Fusce dolor lacus, pretium vitae, dictum vel, semper quis, magna. Maecenas ante lacus, tincidunt eget, interdum ut, interdum a, nibh. Ut eu est. Cras ante. Donec sed ipsum. Phasellus rhoncus ante. Sed ipsum. Suspendisse potenti. In nec massa elementum mi sollicitudin aliquam. Sed accumsan sem a pede. Suspendisse nibh. Suspendisse potenti. Fusce erat magna, eleifend imperdiet, scelerisque quis, bibendum lacinia, urna. Maecenas volutpat, nunc in laoreet malesuada, risus eros bibendum turpis, tincidunt commodo augue nisi in nibh. Ut mollis. </p>
            <p>Praesent vehicula lacus id turpis. In euismod ornare lorem. Donec vitae mi in augue vulputate iaculis. Mauris dictum, ante at suscipit vestibulum, lectus lacus blandit lorem, quis scelerisque quam urna a tortor. Vestibulum metus metus, congue molestie, interdum non, gravida vitae, nisi. Praesent tincidunt ornare metus. Duis enim. Quisque pede. Nullam feugiat enim ac tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut magna. Suspendisse sed purus eu enim interdum convallis. </p>
            <p>Nullam rutrum. Morbi adipiscing malesuada massa. Integer diam felis, feugiat in, auctor sit amet, pretium at, nisl. Vestibulum est. Praesent eu augue. Praesent pulvinar. Fusce eget arcu. Etiam volutpat. In aliquam nunc sit amet ipsum. Nulla dapibus pede ut massa. Integer et erat id massa vehicula molestie. Suspendisse consectetuer diam et diam. Vestibulum vulputate. Fusce quam est, lobortis quis, vehicula vitae, condimentum ac, mi. Pellentesque in quam at nunc aliquam gravida. Integer vel odio. Nullam scelerisque pellentesque augue. Mauris dignissim neque non tortor. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec urna. Nam eget sapien. Nunc consequat velit eu mauris. Donec purus sapien, fermentum quis, sodales sed, placerat non, lorem. Etiam mollis nonummy enim. Donec quis ipsum. Duis vitae enim. Maecenas nec orci. Sed tristique rutrum velit. </p>
            <p>Nunc lectus dolor, aliquam sit amet, luctus eget, sagittis eget, diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus semper pretium felis. Nullam iaculis, lectus ac pulvinar hendrerit, velit magna mollis lorem, sed pulvinar neque orci sed nunc. Aliquam tempus velit nec mi. Duis dignissim molestie ante. Curabitur a nisi vel ipsum sollicitudin tincidunt. Morbi massa neque, dignissim interdum, venenatis a, scelerisque id, odio. Integer bibendum adipiscing neque. Curabitur tortor nisi, nonummy eu, dictum a, hendrerit sed, nisi. Integer at orci. Suspendisse potenti. Sed ut tortor. Suspendisse vitae leo a metus dapibus dictum. Praesent ullamcorper accumsan odio. Maecenas sagittis lorem. Suspendisse rutrum pede non purus. </p>
          </div>
          <!-- end lipsum -->
        </div>
        <!-- end content -->
      </div>
      <!-- end inner -->
      <div id="right">
        <h2>Right Column</h2>
        <ul id="right_menu">
          <li><a href="#">asdf</a></li>
          <li><a href="#">asdf</a></li>
          <li><a href="#">asdf</a></li>
          <li><a href="#">asdf</a></li>
          <li><a href="#">asdf</a></li>
        </ul>
        <p>more text here</p>
        <p>more text here</p>
        <p>more text here</p>
        <p>more text here</p>
        <p>more text here</p>
      </div>
      <!-- end right -->
    </div>
    <!-- end wrapper -->
    <div id="footer">
      <h2>Footer</h2>
    </div>
    <!-- end footer -->
    </body>
    </html>

  12. #12
    SitePoint Enthusiast winthan's Avatar
    Join Date
    Jun 2007
    Location
    Heaven in the Earth
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice css layout markbrown4!

    cheers man!

  13. #13
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Minnesota
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank-you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •