View Full Version : Adding equal width columns to an existing template

05-17-2010, 10: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)



<!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">

<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... " />

<!-- links to stylesheets and scripts -->
<link href="_layout/affiliations.css" rel="stylesheet" type="text/css" />


<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" />
</div><!-- end .logo -->

<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>
<!-- end .nav -->

<!-- end #header -->
<div id="content" class="fixed">
<div id="maincontent" class="fixed" style="width: 830px">
<!-- ************** V MAIN CONTENT HERE V ********************************************************************************** -->



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

<p>&nbsp;<br />
<br />
&nbsp;<!-- ************** ^ END MAIN CONTENT HERE ^ ********************************************************************************** --></div><!-- end #maincontent -->
<!-- end #sidebar -->
</div><!-- end #content -->

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

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

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

</div><!-- end #footer -->


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;}
/* \*/
* html .fixed{height:1%;}

------------------ */

#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; }


.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 {
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;}


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


#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

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

05-18-2010, 03:02 AM
Try adding something like this directly after the <h2>Affiliations</h2> section. I wrote the css inline for ease, but create the classes in your style sheet and you should be good to go.

<div class="colL" style="width:50%; float:left;">
Left Column content

<div class="colR" style="width:50%; float:right;">
Right Column content

05-18-2010, 03:41 AM
Thank You so much Optimus.

This is what I needed!

05-20-2010, 02:38 PM
One more question concerning this page:

This Code:

<div class="colL" style="width:50%; float:left;">
Left Column content</div>

<div class="colR" style="width:50%; float:right;">
Right Column content

Produces this result:

What additional code could I add that would allow me to adjust the alignment of the columns, or the text within the columns so that I could adjust the alignment like the image below? I simply want control over the position on the page. I've played with padding and margins, but remain confused.


code beginner
05-20-2010, 09:41 PM
the page looks nice. good design.

tables always give you the most foolproof, pinpoint precision in spacing things. there is a big trend to get a bit away from tables, using div elements and list items, etc, like it appears to be what you are using.

this page however, looks like a reference page, and is a prime candidate for table use.

you simply use <td style= "width: 100px"> and then the table cell will be 100 pixels wide. if you need to indent something, or even indent the entire table, you can always set the first sell to be blank and then set its pixel width for the amount of indent you need.

the main point is this stuff *does work*. and if it's simply a reference page that is secondary to your main web pages, it doesn't make sense to get tripped up on things that float around on you and columns that don't space the way you want. with tables, you know it's going to work.

05-21-2010, 01:11 PM
I considered doing tables from the very beginning, something easily done using HTML only; however, the CSS is controlling the layout, so I was unsure how to integrate the table into the page. As you say, the consensus is to move away from tables, hence the reason for my question on controlling the alignment in CSS.

I am fine with a table, but in the spirit of learning, I would like to know.

Thanks for the response.

05-24-2010, 06:19 AM
You can accomplish the desired indent by placing adding a child Div to the left column, then applying padding to that. You can change the value for padding-left to a percentage value if you prefer...

<div class="colL" style="width:50%; float:left;">
Left Column header
<div style="padding-left:20px;">
Left Column content

<div class="colR" style="width:50%; float:right;">
Right Column content

05-24-2010, 08:24 AM
Thank you again Optimus, I'll give that a shot.