Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding equal width columns to an existing template

    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.

    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)





    HTML:
    Code:
    <!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... " />
    	
    	<!-- links to stylesheets and scripts -->
    	<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><!-- 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>
    			</ul>
    		</div>
    		<!-- end .nav -->
    	 
    	</div>
    	<!-- end #header -->
    	<div id="content" class="fixed">
    	  <div id="maincontent" class="fixed" style="width: 830px">
    	<!-- ************** V MAIN CONTENT HERE  V ********************************************************************************** -->  
    	
    		<h2>Affiliations</h2>
    
    		
    		<p>&nbsp;</p>
    		
    		<p class="text-center">Needing two equal width columns </p>
    	
    		&nbsp;<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;<br />
    	<br />
    	</p>
    &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 -->
    </body>
    
    </html>
    Style Sheet CSS
    Code:
    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; }

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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.
    Code:
    <h2>Affiliations</h2>
    <div class="colL" style="width:50%; float:left;">
      Left Column content
    </div>
            
    <div class="colR" style="width:50%; float:right;">
      Right Column content
    </div>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You so much Optimus.

    This is what I needed!

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    One more question concerning this page:

    This Code:
    Code:
    <div class="colL" style="width:50%; float:left;">
      Left Column content</div>
            
    <div class="colR" style="width:50%; float:right;">
      Right Column content
    </div>
    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.


  • #5
    Regular Coder
    Join Date
    Sep 2009
    Posts
    167
    Thanks
    15
    Thanked 1 Time in 1 Post
    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.

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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...

    Code:
    <div class="colL" style="width:50%; float:left;">
      Left Column header
      <div style="padding-left:20px;">
        Left Column content
      </div>
    </div>
            
    <div class="colR" style="width:50%; float:right;">
      Right Column content
    </div>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #8
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you again Optimus, I'll give that a shot.


  •  

    Posting Permissions

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