I have a page with a header div. After that is the content. I have images floating on the left to produce an arc. I have an image and an H1 floating on the right. I’m putting content into the page and it flows nicely past the left and right floats.
The problem is when I want to put another left and right column into the content with div tags. It wants to start after my left side images. I can’t get it to start from the top of the area.
I’m not sure if links work here, but here is a link to the page I’m working on that works:
http://www.critterpal.com/gotpet/index.php
This is the page that I’m trying to break into 2 more columns (as indicated by the “2colwrapper”, “linksLeft”, “linksRight”, and “2col” designators below).
http://www.critterpal.com/gotpet/links.php
I’m trying to get the Facebook box to float next to the links column.
This is my stripped-down code for my page:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<html>
<head>
</head>
<body>
<!-- begin top header with images -->
<div id='headerwrapper'>
<div id='header1'>
</div>
<div id='header2'>
</div>
<div id='rotating1'>
</div>
<div id='rotating2'>
</div>
<div id='rotating3'>
</div>
<div id='rotating4'>
</div>
</div>
<!-- end top header with images -->
<!-- begin content area -->
<div id='contentwrapper' class='clearfix'>
<div id='sideimage1'>
</div>
<div id='titlelogowrapper'>
<div id='logo'><img src='../...png' width='135' height='158'></div>
<div id='main-title'><h1>title</h1></div>
</div>
<div id='sideimage2'>
</div>
<div id='sideimage3'>
</div>
<div id='sideimage4'>
</div>
<div id='sideimage5'>
</div>
<div id='sideimage6'>
</div>
<div id='sideimage7'>
</div>
<div id='content'>
<p id='first'> <P>
<div id='2colwrapper'>
<div id='linksLeft' class='2col'>
<h2>title</h2>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h2>title</h2>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id='linksRight' class='2col'>
<script type='text/javascript' src='http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'></script><script type='text/javascript'>FB.init('xxx');</script><fb:fan profile_id='xxx' stream='1' connections='10' width='300'></fb:fan><div style='font-size:8px; padding-left:10px'><a href='http://www.facebook.com/pages/xxx'>xxx</a> on Facebook</div>
</div>
</div>
</div>
</div>
<!-- end content area -->
<div class='clear'> </div>
<!-- begin footer area -->
<div id='footerwrapper'>
<ul id='menu'><li id='menuitem'></li><wbr></ul>
</div>
<!-- end footer area -->
</body>
</html>
Here’s my css:
BODY {
margin: 0%;
font-family: Arial, Helvetica, sans-serif;
scrollbar-base-color: #EA2C2C;
background-image: url("../images/topbackground.jpg");
background-repeat: repeat-x;
}
P {
margin-bottom: 0px;
}
DIV, UL {
margin: 0px;
}
LI {
line-height: 150%;
}
#headerwrapper {
height: 125px;
padding-bottom: 0px;
margin-bottom: 0px;
display: block;
}
#header1 {
background-image: url("../images/arc8_01.jpg");
background-repeat: no-repeat;
position: absolute;
top: 1px;
width: 32px;
height: 125px;
}
#header2 {
background-image: url("../images/arc6_02.jpg");
background-repeat: no-repeat;
position: absolute;
top: 1px;
left: 32px;
width: 118px;
height: 125px;
}
#rotating1, #rotating2, #rotating3, #rotating4 {
position: absolute;
top: 1px;
}
#rotating1 img, #rotating2 img, #rotating3 img, #rotating4 img {
border: 0px;
}
#rotating1 {
left: 150px;
}
#rotating2 {
left: 300px;
}
#rotating3 {
left: 450px;
}
#rotating4 {
left: 600px;
}
#contentwrapper {
background-image: url("../images/redbackground.jpg");
background-repeat: repeat-y;
display: block;
padding-top: 0px;
margin-top: 0px;
}
#sideimage1, #sideimage2, #sideimage3, #sideimage4, #sideimage5, #sideimage6, #sideimage7 {
background-repeat: no-repeat;
float: left;
clear: left;
padding-right: 6px;
}
#sideimage1 {
background-image: url("../images/sidebararc_01a.jpg");
width: 70px;
height: 50px;
}
#sideimage2 {
background-image: url("../images/sidebararc_02a.jpg");
width: 59px;
height: 50px;
}
#sideimage3 {
background-image: url("../images/sidebararc_03a.jpg");
width: 51px;
height: 50px;
}
#sideimage4 {
background-image: url("../images/sidebararc_04a.jpg");
width: 45px;
height: 50px;
}
#sideimage5 {
background-image: url("../images/sidebararc_05a.jpg");
width: 40px;
height: 50px;
}
#sideimage6 {
background-image: url("../images/sidebararc_06a.jpg");
width: 37px;
height: 50px;
}
#sideimage7 {
background-image: url("../images/sidebararc_07a.jpg");
width: 34px;
height: 50px;
}
#content {
margin-left: 40px;
margin-right: 2em;
padding-top: 2em;
}
#titlelogowrapper {
}
#main-title h1 {
float: right;
text-align: right;
letter-spacing: .05em;
word-spacing: .4em;
color: #7A3393;
width: 40%;/* em width variance by element*/
margin: 0.4em 0.4em 0.4em 1em;
padding: 0em 0.6em 0em 0.6em;
background: #A6C63F;
border-left: 3px dotted #EA2C2C;
border-bottom: 3px dotted #EA2C2C;
}
#logo img {
float: right;
padding: 0em 0.8em 0.4em 0em;
}
p#first {
margin-top: 0px;
border-top: 5px dotted #A6C63F;
}
#content p {
text-indent: 3em;
}
#content ul {
padding-left: 3em;
}
#footerwrapper {
clear: both;
color: #ffffff;
width: 100%;
background: #EA2C2C;
display: block;
text-align: center;
}
#menu {
list-style-type: none;
list-style-image: none;
}
#menuitem {
display: inline;
padding: 0px 1em .5em 1em;
white-space: nowrap;
}
#menuitem a {
text-decoration: none;
color: #ffffff;
border-bottom: 1px dotted #ffffff;
}
#menuitem a:hover {
text-decoration: underline;
}
#monkey, #copyright {
font-family: typewriter, Lucidia Sans Typewriter, harting, keyboard, courier, monospace;
color: #000000;
text-align: center;
background: #EA2C2C;
}
#copyright {
font-size: small;
}
#monkey {
font-size: xx-small;
}
.clear {
clear: both;
}
.large {
font-size: xx-large;
}
.purple {
color: #7A3393;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
.2col {
width: 40%;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
