Simple Responsive Layout One Page Question

HTML & CSS
1

Creating a website just a single page website as a landing page. While designing it though I wanted to see if this is something that can be easily achieved doing. There will only be a About and Contact section on the site.

What I am trying to do is achieve this in a one page fully responsive site. Where you go to the site you land on the about page first the page with the Lorem ipsum on it then when the viewer clicks on Contact the cyan area expands like an accordion to show the Contact information as in the second image attached then when you click back to About the cyan closes and the dark blue area expands to show the about information. The magenta area will just stay where it is and wouldnt move would just be static announcement that the full website is coming. If this is possible to do how would I go about it to create this accordion like one page website with the header logo, image and message constantly there as well.

Thanks,

Mike

2

Looks like you are asking for an accordion. Try:

Your image links were not working, by the way.

3

Thanks, yes looking for a Accordion but not just slider to slide sections of the site. IThe images should appear they do on my computer.

4

Someone asked for something similar in a thread a while ago but only using css3. This was the solution that I came up with but is a bit different to what you want and works on hover. It can be turned into [URL=“http://www.pmob.co.uk/temp/transition-2boxes-stretch6.htm”]a sort of accordion.

However I think you will need some js to do this for your example where you want it activated onclick and also supporting older browsers.

Here’s a rough idea but JS is not my thing.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.wrap {
	width:460px;
	margin:auto;
	background:blue;
	padding:0 140px 0 0;
	border-right:100px solid #c00;
	border-left:100px solid cyan;
	word-wrap:break-word;
	min-height:600px;
}
.box1, .box2 {
	width:99%;
	background:blue;
	float:left;
	margin:0;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	min-height:600px;
}
.box1 {
	margin:0;
	background:cyan;
	padding:0;
	width:1%;
	opacity:0;
}
.inner1, .inner2 { padding:20px; }
.box1 .inner { opacity:0 }
ul.nav {
	padding:0;
	list-style:none;
	width:460px;
	margin:0 auto 10px;
	overflow:hidden;
}
.nav li {
	float:left;
	margin:0 20px 0;
}
/*Toggle class */
.toggle .box1 {
	width:99%;
	opacity:1
}
.toggle .box2 {
	width:1%;
	opacity:0
}
.toggle .box1 .inner { opacity:1 }
.toggle .box2 .inner2 { opacity:0 }
</style>
</head>

<body>
<h1>Slide test - IE8+</h1>
<ul class="nav">
		<li><a class="toggleThis about" href="#">About us</a></li>
		<li><a class="toggleThis contact" href="#">Contact</a></li>
</ul>
<div class="wrap">
		<div class="box1">
				<div class="inner1">
						<h3>About</h3>
						Box1 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
		</div>
		<div class="box2">
				<div class="inner2">
						<h3>Contact</h3>
						Box2 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sitt amet </div>
		</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
 $(".toggleThis").click(function () {
    if ($(this).hasClass('about')) {
						$(".wrap").addClass('toggle');
					}	else{
						$(".wrap").removeClass('toggle');	
					}	
				});			
	});
</script>
</body>
</html>

It uses css3 for the animation so you would need to substitute that for some js.

You could probably find a horizontal accordion script to do what you want much better though.

5

Hey Paul,

This is very very close to what I would be looking for except the text line length is thin then expanded when expanded the div. Is it possible to always keep it expanded and just slide and revealing the text. The only other thing would be is it possible to have the blues and magenta go right down to the bottom, I’m not sure if possible to fake that or to actually have them go down to the browser window when the content is shorter.This is a superb job, most horizontal scripts are just for galleries I checked around quite a bit and tried a few but couldnt really mimic what I needed to accomplish but believe the example you did here is the closes thing to what I need so far.

Mike

6

Hi,

You could use display:table-cell instead of float to get the two columns equal and height. If you also fix the width of the inner element then it won’t squash.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.wrap {
	width:460px;
	margin:auto;
	background:blue;
	padding:0 140px 0 0;
	border-right:100px solid #c00;
	border-left:100px solid cyan;
	word-wrap:break-word;
	display:table;
	table-layout:fixed;
}
.box1, .box2 {
	width:99%;
	background:blue;
	display:table-cell;
	margin:0;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	overflow:hidden;
}
.box1 {
	margin:0;
	background:cyan;
	padding:0;
	width:1%;
	opacity:0;
}
.box2{color:#fff}
.inner1, .inner2 {
	padding:20px;
	width:420px;
}
.box1 .inner { opacity:0 }
ul.nav {
	padding:0;
	list-style:none;
	width:460px;
	margin:0 auto 10px;
	overflow:hidden;
}
.nav li {
	float:left;
	margin:0 20px 0;
}
/*Toggle class */
.toggle .box1 {
	width:99%;
	opacity:1
}
.toggle .box2 {
	width:1%;
	opacity:0
}
.toggle .box1 .inner { opacity:1 }
.toggle .box2 .inner2 { opacity:0 }
</style>
</head>

<body>
<h1>Slide test - IE8+</h1>
<ul class="nav">
		<li><a class="toggleThis about" href="#">About us</a></li>
		<li><a class="toggleThis contact" href="#">Contact</a></li>
</ul>
<div class="wrap">
		<div class="box1">
				<div class="inner1">
						<h3>About</h3>
						<p>Box1 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
						<p>More text</p>
						<p>More text</p>
						<p>More text</p>
						<p>More text</p>
				</div>
		</div>
		<div class="box2">
				<div class="inner2">
						<h3>Contact</h3>
						<p>Box2 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sitt amet</p>
				</div>
		</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
 $(".toggleThis").click(function () {
    if ($(this).hasClass('about')) {
						$(".wrap").addClass('toggle');
					}	else{
						$(".wrap").removeClass('toggle');	
					}	
				});			
	});
</script>
</body>
</html>

The animation won’t work in ie9 and under but you could use jquerys animate instead.

Something like:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.wrap {
	width:460px;
	margin:auto;
	padding:0 140px 0 0;
	border-right:100px solid #c00;
	border-left:100px solid cyan;
	word-wrap:break-word;
	display:table;
	table-layout:fixed;
	background:blue;
}
.box1, .box2 {
	width:99%;
	background:blue;
	display:table-cell;
	margin:0;
	overflow:hidden;
}
.box1 {
	margin:0;
	background:cyan;
	padding:0;
	width:1%;
}
.box2 { color:#fff }
.inner1, .inner2 {
	padding:20px;
	width:420px;
}
ul.nav {
	padding:0;
	list-style:none;
	width:460px;
	margin:0 auto 10px;
	overflow:hidden;
}
.nav li {
	float:left;
	margin:0 20px 0;
}
</style>
</head>

<body>
<h1>Slide test - IE8+</h1>
<ul class="nav">
		<li><a class="toggleThis about" href="#">About us</a></li>
		<li><a class="toggleThis contact" href="#">Contact</a></li>
</ul>
<div class="wrap">
		<div class="box1">
				<div class="inner1">
						<h3>About</h3>
						<p>Box1 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
						<p>More text</p>
						<p>More text</p>
						<p>More text</p>
						<p>More text</p>
				</div>
		</div>
		<div class="box2">
				<div class="inner2">
						<h3>Contact</h3>
						<p>Box2 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sitt amet</p>
				</div>
		</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
 $(".toggleThis").click(function () {
    if ($(this).hasClass('about')) {
						$( ".box1" ).animate({
								width: 460
								}, 1000 );
					}	else{
						$( ".box1" ).animate({
								width: 0
								}, 1000 );
					}	
				});			
	});
</script> 
</body>
</html>
7

Hi Paul,

Thanks, this is working great so far. Just couple questions, how can I get some text onto the 300px magenta border like in the desig as well just need to figure out how to make stuff go to the bottom of the browser the colours that slides.

Heres a look at it online the URL is…

http://modocom.ca/vast/

Hopefully can help.

Thanks,

Mike

8

Hi,

The element I gave you is pretty self contained so you could just add anther wrapper and float another element next to it. I only added the coloured borders to show what it would look like if something was next to it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vast Benefits</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!--<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>-->
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,800' rel='stylesheet' type='text/css'>
<style type="text/css">
@charset "UTF-8";
/* CSS Document */

html, body {
	height: 100%;
	margin:0;
	padding:0;
}
body {
	font-size: 16px;
	line-height: 28px;
	font-family: 'Merriweather Sans', sans-serif;
	background: url(http://modocom.ca/vast/images/bg.jpg) top center repeat-y;
}
a { color: #ca2d92; }
.cyan { color: #4dc8e9; }
.tagline {
	margin-top: 75px;
	margin-left: 140px;
	height: 260px;
}
h1 {
	color: #003468;
	font-size: 40px;
	line-height: 52px;
	margin: 0;
	padding: 0;
}
#header {
	height: 474px;
	background: #FFF;
	margin-top: -15px;
}
#holder {
	width: 1000px;
	margin: auto;
	height: 474px;
	background: url(http://modocom.ca/vast/images/main-bg.jpg) no-repeat;
}
.logo {
	margin-top: 30px;
	margin-left: -20px;
}
.wrap {
	width:460px;
	margin:auto;
	padding:0 140px 0 0;
	/*	border-right:300px solid #ca2d92;*/
	border-left:100px solid #4dc8e9;
	word-wrap:break-word;
	display:table;
	table-layout:fixed;
	background: #003468;
	float:left;
}
.box1, .box2 {
	width:99%;
	background: #003468;
	display:table-cell;
	margin:0;
	overflow:hidden;
}
.box1 {
	margin:0;
	background: #4dc8e9;
	padding:0;
	width:1%;
}
.box2 { color:#fff }
.inner1, .inner2 {
	padding-top:20px;
	padding-left: 40px;
	padding-right: 20px;
	padding-bottom: 150px;
	width:420px;
}
.inner1 { color: #003468; }
ul.nav {
	font-size: 14px;
	padding:0;
	list-style:none;
	width:875px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:10px;
	overflow:hidden;
	padding-left: 125px;
}
.nav li {
	float:left;
	margin:0 20px 0;
}
.nav li a {
	color: #003468;
	text-decoration: none;
}

.outer{
	width:1000px;
	margin:auto;
}
.column{
	width:280px;
	float:left;
	padding:10px;	
}
</style>
</head>

<body>
<div id="header">
		<div id="holder"> <img class="logo" src="http://modocom.ca/vast/images/logo.jpg" alt="Vast Benefits" />
				<div class="tagline">
						<h1>The difference from<br>
								one job to another<br>
								<span class="cyan">could be <span class="underline">vast</span></span></h1>
				</div>
				<ul class="nav">
						<li><a class="toggleThis contact" href="#">about</a></li>
						<li><a class="toggleThis about" href="#">contact</a></li>
				</ul>
		</div>
</div>
<div class="outer">
<div class="wrap">
		<div class="box1">
				<div class="inner1">
						<h3>Vast Benefits</h3>
						<p>995 Memorial Ave. Ste D.<br>
								Thunder Bay, ON P7B 2R8<br>
								P (807) 285 9020<br>
								F (807) 345 1346<br>
								E <a href="mailto: yourfriends@vastbenefits.com">yourfriends@vastbenefits.com</a></p>
				</div>
		</div>
		<div class="box2">
				<div class="inner2">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
		</div>
</div>
<div class="column">
		<h3>Test</h3>
		<p>testing</p>
		<p>testing</p>
		<p>testing</p>
		<p>testing</p>
</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
 $(".toggleThis").click(function () {
    if ($(this).hasClass('about')) {
						$( ".box1" ).animate({
								width: 460
								}, 1000 );
					}	else{
						$( ".box1" ).animate({
								width: 0
								}, 1000 );
					}	
				return false;
				});			
	});
</script>
</body>
</html>

The JS has a returned false added at the end to stop the page jumping on the fragment identifier.

just need to figure out how to make stuff go to the bottom of the browser the colours that slides.

I couldn’t quite understand what you meant there. The two columns are cells so will both equalise.

If you meant you always want solid colours to match then you would need to sue another cell roughly like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vast Benefits</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!--<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>-->
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,800' rel='stylesheet' type='text/css'>
<style type="text/css">
@charset "UTF-8";
/* CSS Document */

html, body {
	height: 100%;
	margin:0;
	padding:0;
}
body {
	font-size: 16px;
	line-height: 28px;
	font-family: 'Merriweather Sans', sans-serif;
	background: url(http://modocom.ca/vast/images/bg.jpg) top center repeat-y;
}
a { color: #ca2d92; }
.cyan { color: #4dc8e9; }
.tagline {
	margin-top: 75px;
	margin-left: 140px;
	height: 260px;
}
h1 {
	color: #003468;
	font-size: 40px;
	line-height: 52px;
	margin: 0;
	padding: 0;
}
#header {
	height: 474px;
	background: #FFF;
	margin-top: -15px;
}
#holder {
	width: 1000px;
	margin: auto;
	height: 474px;
	background: url(http://modocom.ca/vast/images/main-bg.jpg) no-repeat;
}
.logo {
	margin-top: 30px;
	margin-left: -20px;
}
.wrap {
	width:1000px;
	margin:auto;
	padding:0;
	/*	border-right:300px solid #ca2d92;*/
	word-wrap:break-word;
	display:table;
	table-layout:fixed;
	background: #003468;
}
.box1, .box2 {
	width:99%;
	background: #003468;
	display:table-cell;
	margin:0;
	overflow:hidden;
}
.box1 {
	margin:0;
	background: #4dc8e9;
	width:1%;
}
.box2 { color:#fff; }
.inner1, .inner2 {
	padding-top:20px;
	padding-left: 40px;
	padding-right: 20px;
	width:420px;
}
.inner1 { color: #003468; }
ul.nav {
	font-size: 14px;
	padding:0;
	list-style:none;
	width:875px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:10px;
	overflow:hidden;
	padding-left: 125px;
}
.nav li {
	float:left;
	margin:0 20px 0;
}
.nav li a {
	color: #003468;
	text-decoration: none;
}
.column {
	width:320px;
	display:table-cell;
	padding:10px;
	background:yellow;
	border-left:160px solid #003468;
}
</style>
</head>

<body>
<div id="header">
		<div id="holder"> <img class="logo" src="http://modocom.ca/vast/images/logo.jpg" alt="Vast Benefits" />
				<div class="tagline">
						<h1>The difference from<br>
								one job to another<br>
								<span class="cyan">could be <span class="underline">vast</span></span></h1>
				</div>
				<ul class="nav">
						<li><a class="toggleThis contact" href="#">about</a></li>
						<li><a class="toggleThis about" href="#">contact</a></li>
				</ul>
		</div>
</div>
<div class="wrap">
		<div class="box1">
				<div class="inner1">
						<h3>Vast Benefits</h3>
						<p>995 Memorial Ave. Ste D.<br>
								Thunder Bay, ON P7B 2R8<br>
								P (807) 285 9020<br>
								F (807) 345 1346<br>
								E <a href="mailto: yourfriends@vastbenefits.com">yourfriends@vastbenefits.com</a></p>
				</div>
		</div>
		<div class="box2">
				<div class="inner2">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
		</div>
		<div class="column">
				<h3>Test</h3>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
		</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
 $(".toggleThis").click(function () {
    if ($(this).hasClass('about')) {
						$( ".box1" ).animate({
								width: 500
								}, 1000 );
					}	else{
						$( ".box1" ).animate({
								width: 0
								}, 1000 );
					}	
				return false;
				});			
	});
</script>
</body>
</html>
9

Hey PAul,

I got everything how it should be looking now the only issue now say on larger screen like after the three colours I’d like them to continue right to the bottom. So if you click on contact and it slide out and the dark blue slides in the cyan will slide out all way to the bottom. Currently it doesnt do that, everything else is perfect except for that. Only hing I could even think of is giving the height in percentage like the header image a percentage height of 40% and the coloured part a min-height of 60% so then the sliding will continue all way to the bottom right now it just stops after the padding-bottom of 150px that I have. Do you know what I mean? Thats only thing I need to fix otherwise I have everything line up like I want etc.

10

Hi,

Assuming the top part is a fixed height you could absolutely position a wrapper at top:460px and bottom:0 and then set the inner table to height:100%. That should allow the table colours to reach the bottom and indeed expand if they need to. Its a bit of a hack because basically the inner falls out of the parent if over 100% but as you don’t have anything underneath it should work.

e.g. something like this based on the code I gave before.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vast Benefits</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!--<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>-->
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,800' rel='stylesheet' type='text/css'>
<style type="text/css">
@charset "UTF-8";
/* CSS Document */

html, body {
	height: 100%;
	margin:0;
	padding:0;
}
body {
	font-size: 16px;
	line-height: 28px;
	font-family: 'Merriweather Sans', sans-serif;
	background: url(http://modocom.ca/vast/images/bg.jpg) top center repeat-y;
}
a { color: #ca2d92; }
.cyan { color: #4dc8e9; }
.tagline {
	margin-top: 75px;
	margin-left: 140px;
	height: 260px;
}
h1 {
	color: #003468;
	font-size: 40px;
	line-height: 52px;
	margin: 0;
	padding: 0;
}
#header {
	height: 474px;
	background: #FFF;
	margin-top: -15px;
}
#holder {
	width: 1000px;
	margin: auto;
	height: 474px;
	background: url(http://modocom.ca/vast/images/main-bg.jpg) no-repeat;
}
.logo {
	margin-top: 30px;
	margin-left: -20px;
}
.tablewrap {
	position:absolute;
	top:458px;
	bottom:0;
	left:0;
	width:100%;
}
.wrap {
	width:1000px;
	margin:auto;
	padding:0;
	/*	border-right:300px solid #ca2d92;*/
	word-wrap:break-word;
	display:table;
	table-layout:fixed;
	background: #003468;
	height:100%;
}
.box1, .box2 {
	width:99%;
	background: #003468;
	display:table-cell;
	margin:0;
	overflow:hidden;
}
.box1 {
	margin:0;
	background: #4dc8e9;
	width:1%;
}
.box2 { color:#fff; }
.inner1, .inner2 {
	padding-top:20px;
	padding-left: 40px;
	padding-right: 20px;
	width:420px;
}
.inner1 { color: #003468; }
ul.nav {
	font-size: 14px;
	padding:0;
	list-style:none;
	width:875px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:10px;
	overflow:hidden;
	padding-left: 125px;
}
.nav li {
	float:left;
	margin:0 20px 0;
}
.nav li a {
	color: #003468;
	text-decoration: none;
}
.column {
	width:320px;
	display:table-cell;
	padding:10px;
	background:yellow;
	border-left:160px solid #003468;
}
</style>
</head>

<body>
<div id="header">
		<div id="holder"> <img class="logo" src="http://modocom.ca/vast/images/logo.jpg" alt="Vast Benefits" />
				<div class="tagline">
						<h1>The difference from<br>
								one job to another<br>
								<span class="cyan">could be <span class="underline">vast</span></span></h1>
				</div>
				<ul class="nav">
						<li><a class="toggleThis contact" href="#">about</a></li>
						<li><a class="toggleThis about" href="#">contact</a></li>
				</ul>
		</div>
</div>
<div class="tablewrap">
		<div class="wrap">
				<div class="box1">
						<div class="inner1">
								<h3>Vast Benefits</h3>
								<p>995 Memorial Ave. Ste D.</p>
						</div>
				</div>
				<div class="box2">
						<div class="inner2">
								<p>Lorem ipsum dolor sit amet, laborum.</p>
						</div>
				</div>
				<div class="column">
						<h3>Test</h3>
						<p>testing</p>
						<p>testing</p>
				</div>
		</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
 $(".toggleThis").click(function () {
    if ($(this).hasClass('about')) {
						$( ".box1" ).animate({
								width: 500
								}, 1000 );
					}	else{
						$( ".box1" ).animate({
								width: 0
								}, 1000 );
					}	
				return false;
				});			
	});
</script>
</body>
</html>

You will need to test thoroughly though but I’m guessing you aren’t going to have any other content on that page anyway.

11

Exactly what I meant,

The only issue now is that my text doesn’t line up properly and I liked the 100px cyan border on the left as still need it as look wise need it to look like this in that positions…

http://modocom.ca/vast/

but the text is not lining up with the header large text.

http://modocom.ca/vast-two/

I tried playing with it but just keep doing weird things for me and didn’t work, I’m sure I’m just editing the wrong numbers or something lol

12

I think you will have to play around with it a bit as I’m not 100% sure what it should look like. There are some limitations in what you can do as they all need to fit together somehow.

You could try some padding and borders like this:


.box2{border-left:90px solid #4dc8e9}
.inner1{padding-left:140px}
.column{border-left-width:60px}

The problems with table-cells is that they stretch when you don;t want them to.