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>