JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Freelance Programmer and Web Developer | Louisville, KY</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<style type="text/css">
p, li{
color: #444;
font-family: Arial, Sans-serif;
}
body{
background: #e6e6e6;
}
#container{
margin-left:auto;
margin-right:auto;
width: 1000px;
}
#main_box1{
width: 830px;
height: 250px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 30px;
}
/*arrow is 33, so 33 + 'top margin' of .box*/
#left_arrow{
position: absolute;
left: 0px;
margin: 87px 50px 0 0;
z-index: 3;
}
#right_arrow{
position: absolute;
right: 0px;
margin: 87px 0 0 50px;
}
#main_boxholder{
margin-left: auto;
margin-right: auto;
width: 640px;
position: relative;
}
.box{
background: grey;
width: 200px;
height: 200px;
margin: 20px 0px 20px 0px;
position: absolute;
z-index: 2;
}
/*
switch these to left/right property and change the body onload
from rightTest/leftTest
*/
#box1{
right: 0px;
}
#box2{
right: 220px;
}
#box3{
right: 440px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body onload="rightTest()">
<div id="container">
<div id="main_box1">
<img id="left_arrow" src="images/layout/left_arrow.png" alt="Left Arrow" />
<div id="main_boxholder">
<a...