Adding equal width columns to an existing template [Archive]

stealth7g

05-17-2010, 09:58 PM

Hi everyone,

I'm glad to have found you all here and after much reading, I am excited that I may finally get an answer to a problem that has haunted me for weeks now.

I am very new to the CSS way of doing things. So new, that I even bought a book, CSS for Dummies! The book offers no help to my situation. :confused:

After guessing my way through positioning of my elements, I finally have the layout I’ve wanted; however, one of the pages will require two equal width columns, and that is where I am stuck. I’ve located many examples for two columns and tried to integrate the code into my style sheet, but the results are disastrous. (Glad I have the original backed up)

The two columns are meant to contain contact information for various affiliates, but I remain stumped on where to place the two column code, CSS & HTML, in an existing style sheet and web page.

I’ve included the HTML and CSS. I would appreciate your guidance to achieve the example image below.

(The site is located at jbwade.net)

http://www.jbwade.net/example/column_layout.jpg

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title> ... Affiliations ... :: JB Wade Custom Homes </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content=" add page description... " />
<meta name="keywords" content=" add keywords... " />


<link href="_layout/affiliations.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="header" class="fixed">

<div class="logo">
<a href="index.html">
<img src="_content/logo.png" border="0" width="280" height="80" alt="logo" />
</a>
</div>

<div class="nav" >
<ul class="fixed">
<li><a href="home.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="affiliations.html"class="active">affiliations</a></li>
<li><a href="testimonies.html">testimonies</a></li>
</ul>
</div>


</div>

<div id="content" class="fixed">
<div id="maincontent" class="fixed" style="width: 830px">


<h2>Affiliations</h2>

<p> </p>

<p class="text-center">Needing two equal width columns </p>

 <p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> <br />
<br />
</p>
 </div>

</div>

<div id="round_bottom"></div>

<div id="footer" class="fixed">

<p class="copyright">Copyright © 2000 - 2010 JBWADE.NET. All Rights Reserved.</p>

</div>
</body>

</html>

Style Sheet CSS
body {
padding: 0;
margin: 20;
background: #6f6f6f url(images/bg.gif) repeat-x top left;
color: #FFFFFF;
font: normal 14px Arial, Helvetica, sans-serif;
position: relative;
}

a { color:#0091D5; }
a:hover { }

img{ border:none; }

table{ width:100%; margin-bottom:15px; line-height:24px; }
th{ border-top:3px solid #970205; padding:7px 10px; color:#fff; background-color:#CA0308; text-align:left; }
td{ border-bottom:1px solid #f4f4f4; padding:10px; }

code{ display:block; margin-bottom:15px; padding:10px; border-left:5px solid #ddd; }

blockquote{ display:block; margin:15px; padding-left:50px; background:#fff url(images/blockquote-quotemark.gif) no-repeat top left; }
blockquote p{ font-style:italic; font-family:Georgia,"Times New Roman",Times,serif; margin:0; height:1%; }

/* align images + text */

.img-left{ float:left; margin:10px 15px 15px 5px; } /* Add this to any image you want to left align */
.img-right{ float:right; margin:10px 5px 15px 15px; } /* Add this to any image you want to right align */

.text-right{ text-align:right; }
.text-center{ text-align:center; }

/* Clear Fix Hack - add class="fixed" to div's that have floated elements in them */

.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.fixed{display:block;}
/* \*/
.fixed{min-height:1%;}
* html .fixed{height:1%;}

/* =HEADER
------------------ */

#header { padding: 20px 0px 0px 0px; margin:0 auto; width:900px; }

/* =LOGO
------------------*/

.logo { float:right; padding:15px 10px 0px 0px; margin:0; color:#FFFFFF; }
.logo a{ outline:none; }

/* =NAVIGATION
------------------*/

.nav { padding:15px 15px 0 30px; background: #000 url(images/bg-nav.jpg) repeat-x top left; -moz-border-radius: 5px 5px 0 0; }
.nav ul { padding:0; margin:0; list-style:none; border:0;}
.nav ul li { float:left; margin:0; padding:0 2px 0 0; border:0;}
.nav ul li a { float:left; margin:0; padding: 5px 10px 20px 10px; color:#fff;
font-size: 14px; font-weight:bold; text-transform:uppercase; text-decoration:none; outline:none; }
.nav ul li a:hover{ text-decoration:underline; }
.nav ul li a.active { background:url(images/bg-nav-active.jpg) no-repeat bottom center; color:#33e2fe; }

/* =CONTENT
-------------------*/

#content {
width: 830px;
margin: 0 auto;
background-color: #000000;
padding: 35px;
}

#content h2 {
margin: 0;
padding: 0px 5px;
font-size: 30px;
color: #25e1ff;
}
#content h3 {
margin: 0;
padding: 15px 5px;
font-size: 18px;
color: #FFFFFF;
}
#content h4 { margin:0; padding:15px 5px; font-size:16px; font-weight:bold; }
#content ul { margin:0 40px 0 0; padding:0 10px 15px 20px; list-style:inside; }
#content li { margin:0; padding:0;}
#content ul li ul{ padding-bottom: 0px; }
#content li { line-height:20px; }
#content p { line-height:20px; }
#content p { padding:5px; margin:0;}

/* =MAIN CONTENT
------------------*/

#maincontent { float:left; width:520px; padding:0px 0px 10px 0px; margin:0; text-align:justify; }

/* =FOOTER
-------------------*/

#footer { background: url(images/bg_footer.gif); padding:0; height:58px; margin:0 auto; padding:10px 40px; width:820px; }

#footer p { font-size: 12px; color:#fff; }
#footer a { color:#fff; text-decoration:underline;}
.copyright{ float:left;}

/* =MISC
-------------------*/

/* =ROUNDED CORNERS
-------------------*/
#round_bottom{ width:900px; height:20px; background:url(images/round-bottom.png) no-repeat top center; margin:0 auto; }