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">
<head>
<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="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<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">
<!--==============================header=================================-->
<header>
<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>
</ul>
</nav>
<div class="row-2">
<h1>Christine Lee <strong>College Counselor</strong></h1>
<div class="logo"></div>
</div>
<div class="row-3">
<h2>Accomplish</h2>
<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>
</p>
</div>
</header>
<!--==============================content================================-->
<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">
<ul>
<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 & a high school student</li>
</ul>
<p> </p></div>
</div>
<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>
</ul>
<p class="p1"> </p>
</article>
<article class="col-2">
<h3>Testimonials</h3>
<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>
<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>
<div class="alignright"><a class="button" href="#"><strong><strong>Read More</strong></strong></a></div>
</article>
</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. </p>
<p>My priority is the student. I see my role as a supplement to their school’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. 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’t distract the student from being motivated.</p>
<p ><strong>What makes me qualified to do this job?</strong><br></p>
<ul>
<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 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:
<ul>
<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>
</ul>
</li>
</ul>
</div>
</div>
<br />
<div id="personal">
<h3>Personal</h3>
<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 “California FunFest”. 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>
</div>
<div class="alignright"><a class="button" href="#"><strong><strong>Resume</strong></strong></a></div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="wrapper">
<div class="fright"><!-- {%FOOTER_LINK} --></div>
Christine Lee © 2011 |
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
/*======= 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 {
width:450px;
margin-right:85px;
}
#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 {
width:350px;
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?
