Trouble with Columns

A family friend has asked me to design her website using a template found online, which I’ve modified to suit her purposes. I’m having trouble, however, creating a reliable two-column layout within some of the pages. Using negative margins and floats I’ve managed a largely satisfactory design, but whenever I zoom in or out the whole thing gets mangled. Here is the html/css:

<!DOCTYPE html>
<html lang="en">
    <title>About Me</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">    
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>    
    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/cufon-replace.js" type="text/javascript"></script>
    <script src="js/Lane_-_Narrow_400.font.js" type="text/javascript"></script>        
    <script src="js/Century_Gothic_700.font.js" type="text/javascript"></script>        
    <!--[if lt IE 7]>
   		<script type="text/javascript" src=""></script>
    <!--[if lt IE 9]>
   		<script type="text/javascript" src="js/html5.js"></script>
<body id="page2">
<div class="main">
<div class="box-main">
	<div class="tail-left">
    <div class="tail-right">
    <div class="tail-top">
    <div class="tail-bot">
    	<div class="corner-top-left">
        <div class="corner-top-right">
        <div class="corner-bot-left">
        <div class="corner-bot-right">
        	<div class="padding-main">
                    <nav class="row-1">
                    	<ul class="menu">
                        	<li><a class="item-1" href="index.html">home </a></li>
                            <li ><a class="item-2" href="process.html">the process </a></li>
                            <li class="active"><a class="item-3" href="index-2.html">about me </a></li>
                            <li><a class="item-4" href="index-3.html">services</a></li>
                            <li class="last-item"><a class="item-5" href="index-4.html">contact </a></li>
                    <div class="row-2">
	                    	<h1>Christine Lee <strong>College 						Counselor</strong></h1>
                    	<div class="logo"></div>

                    <div class="row-3">
                        <h4>Your Goals</h4>
                        <p class="reg">
                        	"Start the college selection process with a sense of freedom. Open yourself up to the excitement and the opportunities ahead." –<i>Steven R. Antonoff, College Match</i>
                <section id="content">
                    <div class="row-1 wrapper border-bot indent-bot2">
                        <article class="col-1">
                        	<h3>A Few Words About Me</h3>
                            <div class="wrapper p2">
                            	<figure class="img-indent"><img src="images/portrait.jpg" alt=""></figure>
                            	<div class="extra-box">
                                	  <li>-Credentialed      college counselor (UCLA -Extension Program)</li>
                                	  <li>-Credentialed      teacher with specialty in writing (Univ of Calif, Berkeley)</li>
                                	  <li>-Credentialed      financial planner (UC -Berkeley Extension)</li>
                                	  <li>-Degree      in psychology (UCSB)</li>
                                	  <li>-Masters      Degree in Education (Harvard University Graduate School)</li>
                                	  <li>-Mother of 2 children: a recent college graduate &amp; a high school student</li>
                            <ul type="disc">
                              <li>I am      committed to helping students find colleges that will enrich their lives.</li>
                              <li>I will      simplify and organize the application process. </li>
                              <li>I will      focus on reducing their stress by creating a plan and a strategy that will      help be competitive and confident.</li>
<p class="p1">&nbsp;</p>
                        <article class="col-2">
                            <div class="indent-bot">
                            	"Lorem ipsum dolor siamet consectetuer adipiscing elit raesent vestibulum molestie lacus. Aenean nonummy hendrerit maurist Phasellus porta. Fusce suscipit varius mi. Cum sociis natoquem penatibus et magnis dis parturient montes, nascetur ridiculuse mus. Nulla dui. Fusce feugiat malesuada."
                            	<div class="alignright"><strong class="color-4">Mark Johnson</strong></div>
                            <div class="p1">
                            	"Odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Loremei ipsum dolor sit amet, consectetuer adipiscing elitauris fermentum dictum magna. Sed laoreet aliquam leo."
                            	<div class="alignright"><strong class="color-4">Jessica Priston</strong></div>
                            <div class="alignright"><a class="button" href="#"><strong><strong>Read More</strong></strong></a></div>
                    <div class="row-2">
                    	<h3>What I Offer</h3>
                        <div class="wrapper p1">
           	    <div id="qualifications">
                            	<p ><strong>What makes me a good college counselor?</strong><br></p>
                                <p>I like working with high school students, which is why I chose to be a teacher. Students at this age are in such a critical time in their lives. They are forming habits that will stay with them forever, and a time when a small turn in the wrong direction can have significant consequences. It is a time when they are exploring and discovering who they really are and what they really want in life. I like to hear their stories and I want to help them get through this college search process as painlessly as possible. With all the stress they are under, they need a helping hand to get through it all. Usually the school counselors are too busy to take the time these students need.&nbsp; </p>
                                <p>My priority is the student. I see my role as a supplement to their school&rsquo;s college counseling program. As a former teacher and administrator, I support the efforts the schools are making and I also understand the heavy workload they have. &nbsp;I also see my role as a support to the parents and will take some of the burden off of their backs. I believe in listening to the parents and involving them in the process in a way that doesn&rsquo;t distract the student from being motivated.</p>
                                <p ><strong>What makes me qualified to do this job?</strong><br></p>
                                  <li>I am credentialed as      a college counselor. This means I have completed extensive coursework at a      nationally recognized program at UCLA. I am part of a network of&nbsp; independent college counselors who      share information and resources. </li>
                                  <li>I am an experienced      writing teacher, with a degree in Psychology. </li>
                                  <li>I enjoy all aspects      of college counseling: 
                                      <li>working with       students of this age and their parents, </li>
                                      <li>researching colleges</li>
                                      <li>keeping up to date       on all the changing requirements, </li>
                                      <li>keeping them       organized and inspired.</li>
                        <br />
                        <div id="personal">
                        <p>I am a California native, having also lived in Boston, Minneapolis, and London.
I now live in Kenwood, a small town north of the Bay Area, with my husband, daughter, and our two dogs.Our older son is a recent alumnus of UC Davis, having graduated in 3 years. We moved here from Boston 15 years ago, though I grew up in the Bay Area. </p>
                        <p>I spent my high school years in Minneapolis, and my college years at UCSB, UC Berkeley, and received my Masters in Education from Harvard University's Graduate School of Education. </p>
                        <p>I taught English, writing, and Social Studies in a public high school for 4 years before leaving to pursue a career in the business world in investment advising and business management. I have a  current teaching credential from the state of California and a Financial Planning Certificate from UC Berkeley Extension.</p>
                        <p>As a stay-at-home mom, I enjoyed publishing a boutique events calendar, which received wide distribution under my trademark &ldquo;California FunFest&rdquo;. This was before the internet became more accessible. During that time I helped start the Kenwood Education Foundation which has now celebrated its 12th anniversary.</p>
                        <p>My brief career as a television news photographer in Monterey was perhaps my most memorable since I was able to record the interview with Joe Montana in the locker room after he won the NFC championship game. I was the 2nd female photographer in history to have been allowed there. </p>
  <div class="alignright"><a class="button" href="#"><strong><strong>Resume</strong></strong></a></div>
                	<div class="wrapper">
	                	<div class="fright"><!-- {%FOOTER_LINK} --></div>
    	                Christine Lee &copy; 2011 |                    
<script type="text/javascript">; </script>

/*======= index.html =======*/
#page1 #content {padding:27px 35px 37px 31px;}
#page1 #content .row-1 .col-1 {width:331px; margin-right:20px;}
#page1 #content .row-1 .col-2 {width:550px;}

#page1 #content .row-2 .col-1 {width:451px; margin-right:84px;}
#page1 #content .row-2 .col-2 {width:375px;}

#page1 #content .row-2 .col-1 .col-1 {width:217px; margin-right:15px;}
#page1 #content .row-2 .col-1 .col-2 {width:217px;}

/*======= index-1.html =======*/
#page2 #content .row-1 .col-1 {
#page2 #content .row-1 .col-2 {width:375px;}

#qualifications {width:400px; float: left;  }
#personal {width: 390px; float: right; margin-top: -720px;}

/*======= index-2.html =======*/
#page3 #content .row-2 .col-1 {width:475px; margin-right:85px;}
#page3 #content .row-2 .col-2 {
	margin-top: -200px;

/*======= index-3.html =======*/
#page4 #content .col-1 {width:450px; margin-right:79px;}
#page4 #content .col-2 {width:381px;}

/*======= index-4.html =======*/
#page5 #content .col-1 {width:450px; margin-right:85px;}
#page5 #content .col-2 {width:375px;}

/*======= index-5.html =======*/
#page6 #content {padding:33px 35px 37px 31px;}

Can anyone recommend a solution?

Hi maxnorman. Welcome to SitePoint. :slight_smile:

Trying to use your code to rebuild the page didn’t do much, as most of the styles don’t seem to be applying. I thing you really need to post a live link for us to help you. I must say, though, there are so many unnecessary nested divs here that it would be much better to build this site from scratch using the design you like. Otherwise you will be hacking your way through a jungle of unnecessary code that will make like a lot more difficult.

Here’s a link to a different, though similarly malfunctioning, page: The Process

You’re right to say that there are a completely unnecessary number of nested divs, but I’m afraid that I haven’t the skill to recreate the design from scratch.

That page seems to work OK for me. What browser are you seeing problems in?

Could you try zooming in and out? That’s when things fall apart for me in Chrome.

Works fine when zooming in and out on Chrome and FF (Mac) for me.

The only problem I see is that the top of the right column is bit messed up, with an image (Timeline) sitting over the h3 text.

  1. Thanks to the HTML 5 nonsense even with the shiv that falls apart horribly here in legacy browsers and even some current ones.

  2. Like most HTML5 I don’t entirely see what you need all those DIV for. NESTING to do corners is usually a bad idea.

  3. Cufon can screw up layouts in pretty much everything, the more complex your layout, the more likely it is to break with that outdated font technique on the board. Do youreself a favor, use CSS3 webfonts instead. At least then the only thing that renders screwed up is Safari putting all vertical padding AFTER the element. (top is added to bottom).

Your example code is an example of EVERYTHING wrong with web development today – endless wrappers around tags that shouldn’t need wrappers, nonsensical heading orders, elements broken into multiple headings when they’re only one set of text (that H2/H4 is serious whiskey tango foxtrot, h3 that should probably be a h2… though you’re using ARTICLE meaning that by HTML 5 rules it should be a H1…) – in general it’s a needlessly complex set of code that appears to be for something simple.

The example “broken” page you linked to is equally all screwy… 7k of HTML for 1.1k of actual content isn’t horrendously bad – but I’d ballpark at LEAST a quarter of that HTML should be on the cutting room floor… along with all the Javascript for NOTHING and not ready for primetime bloated/pointless HTML 5.

Even just simple things like the id on the body tag – usually an indication there’s something wrong with the site in the first place… and if you have to change the layout on every page, it’s time to revise how you’re building the pages! Or the blockquote that’s not in a blockquote and uses italic instead of CITE.

The use of several elements deprecated in the strict doctypes – like “type” on the UL isn’t great either – of course with HTML 5’s “Validation” being uselessly permissive it’s not surprising to see it. Still a waste of code. Oh hey, even the pathetically useless HTML5 validator kvetches about those. That kinda surprises me.

Digging into it, I think MOST of your column problems come from trying to build the columns using the existing article elements, instead of grouping the article elements using a DIV.

Were I to write that in a current RECOMMENDATION doctype – it would probably end up something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

	content="text/html; charset=utf-8"



	The Process


<div id="pageWrapper" class="process">

	<ul id="mainMenu">
		<li class="home">
			<a href="index.html">home</a>
		<li class="process">
			<a href="process.html">the process</a>
		<li class="about">
			<a href="about.html">about me</a>
		<li class="services">
			<a href="services.html">services</a>
		<li class="contact">
			<a href="contact.html">contact</a>

		Christine Lee <span>College Counselor</span>

	<div class="banner">
			Accomplish <span>Your Goals</span>
				"Start the college selection process with a sense of freedom. Open yourself up to the excitement and the opportunities ahead." 
				- <cite>Steven R. Antonoff, College Match</cite>
	<!-- .banner --></div>
	<div id="content">
		<h2>The Process</h2>
		<p class="standout">
			Lorem ipsum dolor sit amet consectetuer adipiscing elit praesent vestibulum molestie lacusenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi cum sociis natoque.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna.
		<div class="readMore"><a href="#">Read More</a></div>
		<div class="wideSubsection">
			<h2>The Search Process</h2>
					Consider who you really are before picking the colleges
						<li>financial aid</li>
					Your Profile
						<li>Fine Tuning Your Academic Plan and Resume; </li>
						<li>Standardized Testing</li>
					College Characteristics and the Role of Prestige
					Alignment: Your needs with what the colleges offer
						<li>The importance of the college visit</li>
			<h2>The Application Process</h2>
				<li>What Colleges Want</li>
				<li>The Essay</li>
				<li>The Application</li>
				<li>High School Profile</li>
				<li>Interviews and Visits</li>
				<li>Special Situations: Athletes, Legacies, Disabilities, etc.</li>
				<li>When To Apply: Create a strategy</li>
		<!-- .wideSubsection --></div>
		<div class="narrowSubsection">
			<h2>The Final Selection Process</h2>
				<li>How to Evaluate</li>
				<li>How to Choose</li>
				<li>How to approach the Wait List</li>
				<li>Calendar </li>
				<li>Pre 		 Freshman Academic Planning</li>
		<!-- .narrowSubsection --></div>
	<!-- #content --></div>		
	<div id="footer">
		Family Psychologist &copy; 2010 |
		<a href="index-5.html">Privacy policy</a>
	<!-- #footer --></div>
<!-- #pageWrapper --></div>	


Which fixes the nonsensical heading orders, throws away all the pointless/unused code, provides reliable hooks for your columns, etc, etc…

… and cuts the markup size in HALF. Using webfonts everything else you are doing can be handled in the CSS, without ANY of the bloated javascript nonsense in there.

Thank you. That revised html is extraordinarily helpful. Now I’ll see if I can rework the CSS to fit…

I have yet to make any real sense of the suggestions posted above. When I start from the file suggested by deathshadow60, none of the CSS works and the site appears as a simple white page.

If the resolution is too difficult, perhaps I should simply resort to a less-than-optimal webpage.

I didn’t provide CSS for it, that was an example of what the HTML should be – all new CSS would have to be written for that.

Could you give me some guidance for how I should go about doing that? I suppose I could simply proceed down the non-compliant route, but I really would prefer to do it correctly.