Ok, so you can see what it looks like now:
UMBC Mama's BoysWhat I want is the little box at the bottom to actually be a "third" column attached to the right side. Now, my code is set up properly, and I think that everything should work, but it doesn't. Here's a visual representation:
|<--------------------- 800 px {Container } --------------------------------->|
|<-------------- 649 px {lwrap} --------------->||<-- 145 px {rwrap} -->|
|<-- 145px -->||<---- 500 px {Content} --->||<-- 145 px {news} --->|
{navwrap}
That's like what I want. And essentially how I have it set up.
Problem is, the "rwrap" doesn't float right, nor does it align to the top. I don't knwo what's going on.
I'm basing it loosely off of the Pi-fecta Three Column Layout. In it, the creator states that you should have a container, a general wrapper, then a left wrapper, and a right wrapper. The left wrapper would contain 2 classes that are floated left & right. The right wrapper would have a class that is floated left.
So, if you look at it, can you tell me what the problem is?
main.css[script]/* CSS Document
Created by:
Brett Patterson
for
Winfield V.F.D. Inc.
Carroll County Maryland
*/
body{
background-color: #FFFFFF;
margin: 0;
padding: 0;
text-align: left;
}
/* Main Page Layout */
#container{
margin: 0;
padding: 0;
}
.wrapper{
width: 800px;
background: url(../images/wrapbackTile.jpg) repeat-y left;
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
}
/* Header */
.wrapperHead{
width: 100%;
background: url(../images/wrapbackHeader.jpg) no-repeat top;
padding: 0;
margin: 0;
text-align: left;
height: 100px;
}
img.imgHeader{
margin: 0;
padding: 0;
border: none;
}
/* Main Content Wrapper */
.mWrap{
width: 796px;
margin: 5px 3px 5px 1px;
padding: 0;
border: none;
}
/* Left Side Area */
.lwrap{
width: 646px;
margin: 0;
padding: 0;
}
.navWrap{
width: 145px;
border: none;
margin: 0px 0px 0px 0px;
padding: 0;
float: left;
}
.navigation{
width: 145px;
margin: 0px 0px 0px 0px;
padding: 0;
text-align: left;
}
/* ================== */
/* Text declarations removed */
/* ================== */
/* Content */
.contWrap{
width: 496px;
float: right;
text-align: left;
border: none;
padding-left: 5px;
margin-top: 0px;
}
.content{
width: 496px;
padding: 0;
margin: 0;
color: #000000;
font-weight: normal;
font-size: 1.0em;
font-variant: none;
}
/* ================== */
/* Text declarations removed */
/* ================== */
/* Right Sidebar */
.rwrapper{
width: 150px;
padding-left: 2px;
float: left;
}
.sidewrap{
width: 145px;
padding: 0;
padding-left: 5px;
margin: 0;
text-align: left;
float: right;
}
.rcont{
border: 1px solid #000000;
width: 145px;
background-color: #FFFFFF;
padding: 2px;
}
/* ================== */
/* Text declarations removed */
/* ================== */
/* Footer */
/* ================= */
/* Removed to save space */
/* ================= */
[/script]
index.html[script]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>UMBC Mama's Boys Homepage</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div id="container">
<center>
<div class="wrapper">
<div class="wrapperHead">
<img src="images/headerSpacer.gif" width="1" height="100" alt="" class="imgHeader" />
<!-- WrapperHead --></div>
<div class="mWrap">
<div class="lwrap">
<div class="navWrap">
<div class="navigation">
<img src="images/nav_main.gif" alt="" class="navlogo" />
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Events</a></li>
<li><a href="">Calendar</a></li>
<li><a href="">Web Forum</a></li>
<li><a href="">Mom's Favorites</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Listen to Us</a></li>
</ul><br>
<img src="images/nav_theboys.gif" alt="" class="navlogo" />
<ul>
<li><a href="">Amish</a></li>
<li><a href="">Brett</a></li>
<li><a href="">Chett</a></li>
<li><a href="">Jon</a></li>
<li><a href="">Jeeves</a></li>
<li><a href="">Jordan</a></li>
<li><a href="">J.P.</a></li>
<li><a href="">Classic</a></li>
<li><a href="">Joe</a></li>
<li><a href="">Ray</a></li>
<li><a href="">James</a></li>
<li><center>New Borns</center></li>
<li><a href="">Mootch</a></li>
<li><a href="">PornStar</a></li>
<li><a href="">Shocker</a></li>
<li><a href="">¿Who?</a></li>
</ul><br>
<img src="images/nav_members.gif" alt="" class="navlogo" />
<ul>
<li><a href="">Log-In</a></li>
<li><a href="">Check Mail</a></li>
</ul>
<!-- Navigation --></div>
<!-- NavigationWrapper --></div>
<div class="contWrap">
<div class="content">
<h2>Festivus A cappellius </h2>
<p class="news">The UMBC Mama's Boys proudly presents Festivus Acappellius <i>(the spelling is proper in our books)</i>. The event will be held on October 30th, 2004 in the UMBC University Center.<br><br>We have invited other A Cappella groups from around our area and have plenty coming.<br><br>The doors open at 6, and singing starts at 7pm.<br><br>Come out and support the UMBC Mama's Boys with a night of fun and excitement!!</p>
<p class="date">October 10, 2004</p>
<!-- Content --></div>
<!-- ContentWrapper --></div>
<!-- LeftWrapper --></div>
<br style="clear: all;">
<div class="rwrapper">
<div class="sidewrap">
<div class="rcont">
<h2>News</h2>
<p class="item">Festivus A Cappellius scheduled for October 30th. Approx. 9 other groups to perform!!</p>
<p class="idate">October 10, 2004</p>
<!-- Conntent --></div>
<!-- Sidebar Wrap --></div>
<!-- RightWrapper --></div>
<!-- MainContentWrapper --></div>
<br clear="all">
<div class="wrapperFoot">
<div class="footer"><br>Copyright © 2004<br>
UMBC Mama's Boys<br>
<font color="#00CCFF"><b><i>UMBC's Only All Male A Cappella</i></b></font><br><br>
<a href="
http://www.umbc.edu" onMouseOver="this.status='UMBC - An Honors University in Maryland';" onMouseOut="this.status='';">University of Maryland - Baltimore County</a>
<!-- Footer -->
</div>
<!-- WrapperFoot -->
</div>
<!-- Wrapper --></div>
</center>
<!-- Container --></div>
</body>
</html>
[/script]
Thanks for the help guys.
~Brett
Topic: CSS Alignment Problem (Read 1777 times)