4 Column CSS Layout

Avapro Mg Cipro Xr 1000 Calcium Carbonate Reacting With Hydrochloric Acid Zyprexa And Elderly Dosing Zocor Patient Assistance Program Urispas Flavoxate Hci Apo Lisinopril Bextra Celebrex Vioxx Rate Hgh Extrem Ultram Vicodin Soma Smila Brite Dental Seroquel Lithium Personal Stories About Topamax Catherine Goetz Lipitor Lynchburg T-nation Hgh Sarafem Unavailable Zoloft Versus Generic Plavix Approval Zithromax Antibiotic For Nasal Staph Natural Hgh Wholesale Kentile Brite N Shiny Paxil Class Action Law Suit The Use Of Prometrium Authentic Hgh Tmj And Human Growth Hormone Seroquel Rapid Cycling Evista Bisphosphonate Generic Viagra Soft Tabs Mircette 1 Lamictal And Muscle Jerking Atrovent Drug Cards Prostate Cancer And Injectable Hgh Dr Thomas Owley Autism Lexapro Does Ultram Make You Feel High Zocor What Strength To Take Generic Cialis Paypal Payment Bush Cocaine Prozac Celebration Of Purim Human Growth Hormone Recovery And Purification Itchy Rash Lamictal Lamotrigine Takes Multiple Sclerosis Lexapro Levaquin Every 12 Hours Nizoral Active Ingredient Positive Experience Quitting Prozac Promotion Code For Soma Intimates Why Does Paxil Cause Sexual Dysfunction Phentermine Tramadol Viagra Coreg Lawsuit Mobic Changes Zoloft Bruising

I needed to come up with a 4 column layout today using CSS. What I came up with isn’t completely finished, nor has it been extensively tested, but I figured I’d toss the first round out and see if anything came of it. The goal was to create a layout with fixed-width columns on the outside and fluid columns inside. I’ve only spent about 45 minutes on this, and plan to do much more in the coming days. Hopefully I’ll remember to post my progress.

First, I created my content section and filled it with two primary columns, Left and Right. Each of those columns holds two others, navigation and content.


<div id='content'>
  <div id=’left’>
    <div id=’left_navigation’>
      <ul>
        <li>Link One</li>
        <li>Link Two</li>
        <li>Link Three</li>
        <li>Link Four</li>
        <li>Link Five</li>
      </ul>
    </div>
    <div id=’left_content’>
      <p>Text 1</p>
      <p>Text 2</p>
    </div>
  </div>
  <div id=’right’>
    <div id=’right_content’>
      <p>Text 1</p>
      <p>Text 2</p>
    </div>
    <div id=’right_navigation’>
      <ul>
        <li>Link One</li>
        <li>Link Two</li>
        <li>Link Three</li>
        <li>Link Four</li>
        <li>Link Five</li>
      </ul>
    </div>
  </div>
</div>

Then I styled everything to float to the sides and put negative margins on the navigation, positive margins on the content. This keeps everything in line and means that I don’t have to mess with widths on the content divs, which is great for keeping things simple and letting the browsers figure out more of the details.


#left {
  width:49%;
  float:left;
  }

#left_navigation {
  width: 150px;
  background-color:#333;
  float:left;
  margin-right:-160px;
  }

#left_content {
  background-color:#6cc;
  float:right;
  padding:15px;
  margin-left:160px;
  }

#right {
  width:49%;
  float:right;
  }

#right_content {
  background-color:#c66;
  float:left;
  padding:15px;
  margin-right:160px;
  }

#right_navigation {
  width: 150px;
  background-color:#999;
  float:right;
  margin-left:-160px;
  }

That’s it for now, if anyone wants any more information or if I did something really silly, I’d love to hear it.