CSS - Aligning Text/image Inside Css Box

I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09


I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move.


Here is one of the examples:
Code:

#homepage-bar h2.construction {
	position:fixed;
	top:225px;
	left:505px;
}

I tried changing to position: absolute; I also tried to use percentages on the left:


I know this is easy, but I can't find the fix after googling for 30 minutes. Help!

hey all, i have a page that has text on it and i am trying to add another div with a photo in it so that i can place the photo on the right had side and get the text to wrap around it. buti am having probs. the text doesn't wrap around the photo ... so the photo just ends up at the bottom of the text on the right...

here is the code i am currently using for it
Code:

#rightphoto {position: absolute; right: 10px; border: 1px solid #ccc; padding: 2px 2px 2px 2px;}

i have had various ideas but none have worked,,,,this is the latest...

any ideas??

thanks

RF

I need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it.

This is what I want it to look like image link

This is what does look like web page link

Here is the CSS css link

How can I get abosolute vertical placement of the text best for firefox and IE?

I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible.

Thanks!

Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right.

| [image] text .... right-side text |

This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method.

All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method.

Any help or suggestions will be greatly appreciated.
Thanx

Hi Guys,

I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image.

Here's what I have so far.


img.top {vertical-align:text-top;}

<a href="http://company.com/graphics/thumb.jpg">
<img class="top" src="http://company.com/graphics/thumb.jpg">
</a>
<a href="company.com">sample text</a>
<a href="company.com">second line</a>


Any ideas? I've tried like every switch for the vertical-align property...

Hi,

I am trying to achieve a layout which uses unordered lists.

Within the LI, there is an image and some text. The images are all different heights though.

The issue i'm having at the moment is how can I make the text vertically align within the LI? Keep in mind that I can't put a height on as each image changes height. And these lists will be generated dynamically probably - so I don't really want to specify individual heights for each one... To make it even more difficult, the text may end up spanning onto two lines at some stage if i have to enter a larger description - so that also needs to be kept in mind.

I've been looking around all morning for examples of how to do this and I can't find anything - so any help would be greatly appreciated!!!

Here is what I'm trying to achieve:
http://www.joshsphotos.com/user_interface/final_look.gif

Here is the HTML at present:
http://www.joshsphotos.com/user_interface/

And the CSS:
http://www.joshsphotos.com/user_interface/css/style.css

Thanks!

Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table.

so i don't want to use absolute positioning, as the position would change if the window size changes...

My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"...
The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore...

If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore...

Here you can see the code i used for both example 1 and example 2:

example 1:

<html>
<head>
<title>relative problem - example 1</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table border=1>
<tr>
<td width="640" height="480">
<div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>



example 2:

<html>
<head>
<title>relative problem - example 2</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<table border=1>
<tr>
<td width="640" height="480">
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

thx for letting me know...

I am new to CSS and just experimenting with a site. I have however hit a but of a brick wall. Now the following div tags work fine in Firefox but in IE they don't align right.

This is the syle info

Code:

div#info {
			float: left;
			width: 210px;
			margin-top: 0px;
			border-right: 1px dashed blue;
			font-family: Arial;
			min-height: 350px;
			}	

.infobox { 
				width: 220px; 
				height: 280px;
				background: transparent url(images/userinfo.jpg) no-repeat top left; 
				text-align: left;
				padding-left: 10px;
				}
		.userbox { 
				padding-top: 40px;
				padding-left: 55px;
				font-size: 20px;
				}
		.questionbox { 
				padding-top: 60px;
				padding-left: 55px;
				font-size: 20px;
				}	
		.scorebox { 
				padding-top: 60px;
				padding-left: 55px;
				font-size: 20px;
				}

Now the following code works fine in both firefox and ie. It aligns everything up.

Code:

<div id="info">
			<div class="infobox">
			<div class="userbox">
			Username
			</div>
			<div class="questionbox">
			Question 1
<div class="scorebox">
			3 out of 5
			</div>
			</div>
		</div>	

However i am trying to insert some javascript into the "questionbox" tag like this


Code:

<div id="info">
			<div class="infobox">
			<div class="userbox">
			Username
			</div>
			<div class="questionbox">
			<form name="questionnumber">
			<input type="text" name="question" size="5" readonly="true" value=""></input>
			<script language="JavaScript" type="text/javascript">test()</script>
			</form>

			</div>
			<div class="scorebox">
			3 out of 5
			</div>
			</div>
		</div>	

Then all the alignment stays the same in firefox. However in IE the text box is moved down slightly and therefore doesn't align.

Any ideas

The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables?
The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7.
Code:

#title {
	margin-left: 170px;
	background: url(./imgs/title_mdl.gif) repeat-x;
	width: auto;
	height: 40px;
}
#title span {
	font-size: large;
	text-align: center;
}
#title img {
	width: 82px;
	height: 40px;
}

Code:

<div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div>

I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div

When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower.

To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this.

Here is the HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrapper">
  <div id="header">Content for  id "header" Goes Here</div>

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">Link1</a></li>
		<li><a href="#">Link2</a></li>
		<li><a href="#">Link3</a></li>
		<li><a href="#">Link4</a></li>
		<li><a href="#">Link5</a></li>
	</ul>
</div>
 
<div id="content">jkjk</div> 

<div id="sidebar">

		<div id="calender"><h3>Calender</h3>
        	<p>fjkfjdklfjkljfsk</p></div>
            
         <div id="active"><h3>Archive</h3>
         <p>fjdkfjkfjk</p></div>   

</div>
  

 
<div id="footer">Content for  id "footer" Goes Here</div>
</div>
</body>
</html>

And here is the main.css:

Code:

@charset "utf-8";

/* Main style */

body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }

.wrapper {
	text-align: left;
	margin: 0 auto;
	width: 750px;
}

/* Header */

#header {
	background-color: #996666;
	margin-top: 35px;
	margin-bottom: 5px;
	height: 90px;
	padding: 0;
	border: solid 1px #F00;
}

/* Nav Bar */

div#navcontainer {
	background-color: #996666;
	border: 1px solid #F00;
	margin-bottom: 5px;
}

div#navcontainer ul {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000;
	text-align: center;
	margin: 0;
	padding-bottom: 5px;
	padding-top: 5px;
}

div#navcontainer ul li {
	display: inline;
	margin-left: -4px;
}

div#navcontainer ul li a
{
	padding: 5px 10px 5px 10px;
	color: #000;
	text-decoration: none;
}

div#navcontainer ul li a:hover
{
	color: #FFF;
}

#active a {
}

/* Main Content */

#content {
	background-color: #996666;
	float: right;
	width: 500px;
	border: 1px solid #F00;
	margin-bottom: 5px;
}

/* Sidebar Styles */

#sidebar {
	background-color: #996666;
	float: left;
	width: 243px;
	border: 1px solid #F00;
}


/* The Divs that house Calender and Archive */

#sidebar div {
	background-color: #800040;
}

/* The 'Calender' and 'Archive' text */

#sidebar div h3 {
	background-color: #FF0;
	font-size: 85%;
	text-align: center;
	text-decoration: underline;
	margin-top: -1px;	  /* Remove this line and the calender 'box' should drop a few pixels from the top */
	
}



/* Footer */


#footer {
	background-color: #996666;
	border: 1px solid #f00;
	clear: both;
	padding: 0;
	margin: 0;
}

If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily.

The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out.

http://www.kafadrian.com/juggernaut/index.html
is what i have so far
I want it to look like:
http://www.kafadrian.com/juggernaut/layout.jpg

The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them

I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images.

am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem.

I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work.

the code for the site is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">

<script type="text/javascript">
<!--

var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";

var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";

var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";

var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";

var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";

var image16 = new Image();
image16.src = "founded.jpg";

//-->
</script>
<script type="text/javascript">
<!--

function roll(img_name1, img_src1, img_name2, img_src2)
   {
   document[img_name1].src = img_src1;
   document[img_name2].src = img_src2;
   }

//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
  <tr height="34">
    <td rowspan="4">
      <img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
        <img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
      </a>
    </td>
  </tr>
    <tr>
    <td>
      <img style="display:block" src="line_right.jpg" width="240" height="4"/>
    </td>
  </tr>
  <tr>
    <td>
      <img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
    </td>
  </tr>
</table>
</body>
</html>

Ok well im new to these forums and ive been looking pretty much everywhere for help, so heres my problem. I bought a joomla template from a company, i got it then installed it, but im having one huge issue i cant seem to fix. The news is piling up next to each other instead of each new news post going above the older one in a nice neat line one post after another. Instead they just moosh together after the first post. I emailed the company and they said i had to edit the css and thats all the help i got. I have no knowledge of css and have no idea how to fix the issue. Any help would be greatly appreciated. A link to my site is below as well as the template css. Please someone help me with this problem.


http://almostfinite.info/pku


Code:

/*------------------------------------------------------------------------
# JA Sanidine II for Joomla 1.5 - Version 1.0 - Licence Owner JA98631
# ------------------------------------------------------------------------
# Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites:  http://www.joomlart.com -  http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
-------------------------------------------------------------------------*/

/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF;
	color: #000000;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	line-height: 1.5;
}

body#bd {
	color: #333333;
	background-color: #CCCCCC;
	background-attachment: fixed;
        background-repeat: no-repeat;
	background-position: center top;
}

body.contentpane {
	color: #000000;
	font-size: 12px;
	line-height: 1.3em;
	margin: 0;
	margin: 1em 2em;
	width: auto; /* Printable Page */
}

body.fs1 {font-size: 10px;}
body.fs2 {font-size: 11px;}
body.fs3 {font-size: 12px;}
body.fs4 {font-size: 13px;}
body.fs5 {font-size: 14px;}
body.fs6 {font-size: 15px;}

/* Normal link */
a {
	color: #D58400;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: #D58400;
	text-decoration: underline;
}

a img {
	border: none;
}

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
	line-height: normal;
}

/* Small text */
small, .small, .smalldark, .article-meta, .modifydate, .img_caption p, .site-slogan, #ja-login,
a.readon, #ja-botnav, #ja-pathway, #ja-subnav, #ja-contentsl1, #ja-contentsl2, #ja-footer, #ja-col1, #ja-col2, #ja-botsl {
	font-size: 92%;
}

img {
	margin: 0;
	padding: 0;
}

.img_caption img {
	border: 1px solid #CCCCCC;
}

.img_caption p {
	text-align: center;
	color: #666666;
}

.img_caption.left, .img_caption.right {
	margin-top: 3px;
}

.no-caption {
	margin: 3px 0 3px 5px;
	border: 1px solid #CCCCCC;
}

/* Heading */
h1 {font-size: 200%;}
h2 {font-size: 175%;}
h3 {font-size: 150%;}
h4 {font-size: 125%;}

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
	margin: 1em 0;
	padding: 0;
}

ul {
	list-style: none;
}

ul li {
	background: url(../images/bullet.gif) no-repeat 20px 6px;
	padding-left: 30px;
}

ol li {
	margin-left: 35px;
}

th {
	font-weight: bold;
	padding: 7px 8px;
	text-align: left;
}

fieldset {
	padding: 7px 5px 5px !important;
	border: none;
	margin: 1em 0 0;
	background: url(../images/sep.gif) repeat-x top;
}

fieldset legend {
	font-weight: bold;
	background: #FFFFFF;
}

fieldset a {
	font-weight: bold;
}

fieldset.input {
	padding: 0;
	background: none;
}

hr {
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	border-top: 1px solid #CCCCCC;
	height: 1px;
}

br {
	height: 1px;
	font-size: 1px;
}

td, th, div {
	font-size: 100%;
}

/* FORM
--------------------------------------------------------- */
form {
	margin: 0;
	padding: 0;
}

form label {
	cursor: pointer;
}

input, select, textarea, .inputbox {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

textarea, textarea.inputbox {
	background: #FFFFFF;
	color: #333333;
	border: 1px solid #DDDDDD;
}

.inputbox {
	padding: 3px 2px;
	border: 1px solid #DDDDDD;
	background: url(../images/input-bg.gif) repeat-x top #FFFFFF;
	color: #333333;
	font-size: 100%;
}

.button {
	padding: 3px 8px 2px;
	border: 1px outset #CCCCCC;
	background: url(../images/grad-1.gif) repeat-x top #D58400;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 92%;
	font-weight: bold;
}

.button:hover {
	border: 1px inset #CCCCCC;
}

select#ordering, select#limit {
	background-image: none;
}

* html .button { /*IE 6*/
	padding: 2px 5px !important;
}

*+html .button { /*IE 7*/
	padding: 2px 5px !important;
}

/* JOOMLA STYLE
--------------------------------------------------------- */
.article_separator, .article_seperator {
	clear: both;
	display: block;
	height: 30px;
	margin: 0;
	background: url(../images/sep.gif) repeat-x center;
}

.column_separator {
	padding: 0 25px;
}

/* content tables */
.sectiontableheader {
	background: url(../images/grad-2.gif) repeat-x top #373737;
	border: 1px solid #DDDDDD;
	padding: 6px 8px;
	color: #FFFFFF;
	font-weight: bold;
}

.sectiontableheader a,
.sectiontableheader a:hover,
.sectiontableheader a:active,
.sectiontableheader a:focus {
	color: #FFFFFF;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
	padding: 8px;
	background: url(../images/sep.gif) repeat-x bottom;
}

table.contentpane {
	border: none;
	width: 100%;
}

table.contentpaneopen {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

table.contenttoc {
	margin: 0 0 10px 10px;
	padding: 0;
	width: 30%;
	float: right;
}

table.contenttoc td {
	background: url(../images/bullet.gif) no-repeat 12px 8px;
	padding: 1px 5px 1px 20px;
}

table.contenttoc th {
	background: url(../images/sep.gif) repeat-x bottom;
	padding: 0 0 3px;
	text-indent: 5px;
}

table.poll {
	border-collapse: collapse;
	padding: 0;
	width: 100%;
}

table.pollstableborder {
	border: none;
	padding: 0;
	text-align: left;
	width: 100%;
}

table.pollstableborder img {
	vertical-align: baseline;
}

table.pollstableborder td {
	border-collapse: collapse;
	border-spacing: 0;
	padding: 4px !important;
	background: none;
}

table.pollstableborder tr.sectiontableentry1 td {
}

table.searchintro {
	padding: 10px 0;
	width: 100%;
}

table.searchintro td {
	padding: 5px!important;
}

.blog_more {
	margin: 15px 0 0;
	padding: 15px 0 0;
	background: url(../images/sep.gif) repeat-x top;
}

.blog_more strong {
	display: block;
	margin: 0 0 5px;
	text-transform: uppercase;
}

.blog_more ul {
	margin: 0;
	padding: 0;
}

.blog_more ul li {
	background: url(../images/bullet.gif) no-repeat 4px 8px;
	margin: 0;
	padding: 0 0 0 12px;
}

.category {
	font-weight: bold;
}

h1.componentheading, .componentheading {
	font-size: 250%;
	margin: 0 0 15px;
	padding: 0;
	color: #D58400;
}

.contentdescription {
	padding-bottom: 30px;
}

h2.contentheading, .contentheading {
	margin: 0;
	padding: 0;
	font-size: 200%;
	color: #008EBF;
}

table.blog .contentheading {
	font-size: 135%;
}

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
	color: #008EBF;
}

a.readon {
	font-weight: bold;
	text-transform: uppercase;
}

a.readon:hover, a.readon:focus, a.readon:active {
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
	width: 100%;
}

.moduletable {
	padding: 0;
}

ul.pagination {
	margin: 20px auto;
	padding: 20px 0 0;
	color: #666666;
}

ul.pagination li {
	background: none;
	display: inline;
	margin: 0;
	padding: 0;
}

ul.pagination li span {
	padding: 2px 5px;
}

ul.pagination a {
	padding: 2px 5px;
	text-decoration: none;
	background: url(../images/grad-4.gif) repeat-x top;
	color: #666666;
	border: 1px solid #DDDDDD;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
	background: #D58400;
	color: #FFFFFF;
}

.pagenavbar {
	background: url(../images/icon-pages.gif) no-repeat center left;
	font-weight: bold;
	padding-left: 14px;
}

.pagenavcounter {
	background: url(../images/icon-pages.gif) no-repeat 0 11px;
	font-weight: bold;
	padding: 8px 14px 0 14px;
}

.smalldark {
	text-align: left;
}

div.syndicate div {
	text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
	background: none;
}

ul.latestnews a, ul.mostread a {
}

/* META
--------------------------------------------------------- */
.article-toolswrap {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	position: relative;
}

.article-tools {
	display: block;
	padding: 0 10px 0 0;
}

.article-meta {
	width: 70%;
	float: left;
	margin-top: 3px;
	color: #666666;
}

.createby {
	font-weight: bold;
}

.createdate {
	padding-right: 6px;
	margin-right: 5px;
	background: url(../images/vline.gif) no-repeat right;
}

.createdate-icon { /*for clendar style*/
	margin: 0 10px 0 0;
	display: block;
	float: left;
	width: 40px;
	height: 38px;
	text-align: center;
	border: 1px solid #CCCCCC;
	background: #F8F8F8;
	color: #666666;
}

.ja-date {
	font-size: 15px;
	font-weight: bold;
}

.ja-month {
	color: #666666;
	font: 9px/14px Arial, Helvetica , sans-serif;
	text-transform: uppercase;
	display: block;
	letter-spacing: 1px;
	background: url(../images/grad-4.gif) repeat-x top #999999;
	border-bottom: 1px solid #CCCCCC;
}

.modifydate {
	width: 100%;
	display: block;
	color: #D58400;
	margin: 15px 0;
}

.article-section {
	padding-left: 6px;
	margin-left: 5px;
	background: url(../images/vline.gif) no-repeat left center;
}

.article-section a {
	color: #666666;
}

.article-category a {
	color: #666666;
}

div.buttonheading {
	position: absolute;
	top: 0;
	right: 10px;
}

.buttonheading img {
	margin: 0 0 0 5px;
	border: 0;
	float: right;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
	width: 950px;
	margin: 0 auto;
	clear: both;
	background: url(../images/wrapper-bg.png) repeat-y center;
}

.narrow #ja-wrapper {
	width: 750px;
	background: url(../images/wrapper-bg-n.png) repeat-y center;
}

#ja-container {
	padding: 5px 20px;
}

#ja-mainbody {
	width: 70%;
	float: left;
}

/* PRIMARY COLUMN
--------------------------------------------------------- */
#ja-content {
	clear: both;
	display: block;
	float: right;
	width: 70%;
	background: url(../images/content-center3.gif) repeat-y center #FFFFFF;
}

#ja-content-top {
	background: url(../images/content-top3.gif) no-repeat center top;
}

#ja-content-bot {
	background: url(../images/content-bot3.gif) no-repeat center bottom;
}

.narrow #ja-content {
	background: url(../images/content-center3-n.gif) repeat-y center #FFFFFF;
}

.narrow #ja-content-top {
	background: url(../images/content-top3-n.gif) no-repeat center top;
}

.narrow #ja-content-bot {
	background: url(../images/content-bot3-n.gif) no-repeat center bottom;
}

#ja-current-content {
	padding: 20px;
	margin: 0;
}

/* COLUMNS
--------------------------------------------------------- */
#ja-col1 {
	float: left;
	overflow: hidden;
	width: 30%;
}

#ja-col1 div.ja-innerpad {
	padding-right: 5px;
}

#ja-col2 {
	float: right;
	overflow: hidden;
	width: 30%;
}

#ja-col2 div.ja-innerpad {
	padding-left: 5px;
}

/*common style for column*/


/* COLLAPSIBLE LAYOUT
--------------------------------------------------------- */
#ja-containerwrap,
#ja-containerwrap-fr,
#ja-containerwrap-fl,
#ja-containerwrap-f {
	clear: both;
}

/*content + left*/
#ja-containerwrap-fr #ja-mainbody {
	width: 100%;
}

#ja-containerwrap-fr #ja-col1 {
	width: 22%;
}

#ja-containerwrap-fr #ja-content {
	width: 78%;
	background: url(../images/content-center2.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-fr #ja-content-top {
	background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fr #ja-content-bot {
	background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fr #ja-content {
	background: url(../images/content-center2-n.gif) repeat-y center #FFFFFF;
}

.narrow #ja-containerwrap-fr #ja-content-top {
	background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fr #ja-content-bot {
	background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*content + right*/
#ja-containerwrap-fl #ja-content {
	width: 100%;
	background: url(../images/content-center.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-fl #ja-content-top {
	background: url(../images/content-top.gif) no-repeat center top;
}

#ja-containerwrap-fl #ja-content-bot {
	background: url(../images/content-bot.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fl #ja-content {
	background: url(../images/content-center-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fl #ja-content-top {
	background: url(../images/content-top-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fl #ja-content-bot {
	background: url(../images/content-bot-n.gif) no-repeat center bottom;
}

/*full*/
#ja-containerwrap-f #ja-mainbody {
	width: 100%;
}

#ja-containerwrap-f #ja-content {
	width: 100%;
	background: url(../images/content-center1.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-f #ja-content-top {
	background: url(../images/content-top1.gif) no-repeat center top;
}

#ja-containerwrap-f #ja-content-bot {
	background: url(../images/content-bot1.gif) no-repeat center bottom;
}

#ja-containerwrap-f #ja-current-content {
	padding-left: 20px;
	padding-right: 20px;
}

.narrow #ja-containerwrap-f #ja-content {
	background: url(../images/content-center1-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-f #ja-content-top {
	background: url(../images/content-top1-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-f #ja-content-bot {
	background: url(../images/content-bot1-n.gif) no-repeat center bottom;
}

/* MODULE
--------------------------------------------------------- */
div.moduletable h3 {
	margin: 0 -8px 10px;
	padding: 0 0 0 30px;
	font-size: 100%;
	height: 28px;
	line-height: 28px;
	color: #333333;
	background: url(../images/h3-bg.gif) no-repeat left;
	text-transform: uppercase;
}

div.moduletable h3 span {
	display: block;
	height: 28px;
	background: url(../images/h3-bg.gif) no-repeat right;
}

div.moduletable {
	margin: 0;
	padding: 0 15px;
}

div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.ja-box-br h3 {
	margin: 0 -6px 10px;
	padding: 0 0 0 30px;
	font-size: 100%;
	height: 28px;
	line-height: 28px;
	color: #FFFFFF;
	background: url(../images/h3-bg.gif) no-repeat left #333333;
	text-transform: uppercase;
}

div.module h3 span,
div.module_text h3 span,
div.module_menu h3 span,
div.module_hilite h3 span,
div.ja-box-br h3 span {
	display: block;
	height: 28px;
	background: url(../images/h3-bg.gif) no-repeat right;
}

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.ja-box-br {
	padding: 0;
	float: left;
	clear: both;
	width: 100%;
	background: url(../images/box-br.gif) no-repeat bottom right #FFFFFF;
	overflow: hidden;
	margin-bottom: 5px;
}

div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.ja-box-bl {
	margin: 0;
	padding: 0;
	background: url(../images/box-bl.gif) no-repeat bottom left;
}

div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.ja-box-tr {
	padding: 0;
	margin: 0;
	background: url(../images/box-tr.gif) no-repeat top right;
}

div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.ja-box-tl {
	padding: 15px 20px 15px;
	background: url(../images/box-tl.gif) no-repeat top left;
}

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div {
	margin: 0;
	padding: 0;
	background: none;
}

/* mis */
div.banneritem_text {
	padding: 5px 0 !important;
}

div.advs {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

div.moduletable li,
div.moduletable_menu li,
div.moduletable_text li,
div.module li,
div.module_menu li,
div.module_text li {
	padding-left: 15px;
	background-position: 5px 7px;
}

/* HEADER
--------------------------------------------------------- */
#ja-header {
	line-height: normal;
	position: relative;
	padding: 0;
	margin: 0 10px;
	z-index: 999;
	height: 127px;
	background: url(../images/header-bg.gif) repeat-x 0 19px #FFFFFF;
	border-top: 1px solid #CCCCCC;
	border-bottom: 3px solid #D58400;
}

h1.logo, div.logo-text {
	margin: 0 20px;
	padding: 0;
}

h1.logo {
	width: 330px;
	height: 70px;
	position: absolute;
	top: 10px;
}

h1.logo a {
	width: 330px;
	height: 70px;
	display: block;
	background: url(../images/logo.png) no-repeat center;
}

h1.logo a span {
	position: absolute;
	top: -1000px;
}

div.logo-text {
	outline: none;
	position: absolute;
	top: 20px;
}

div.logo-text h1 {
	font-size: 250%;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 0;
	padding: 0;
}

div.logo-text h1 a {
	color: #333333;
}

.site-slogan {
	color: #666666;
	margin: 0;
	padding: 0;
}

#ja-topnav {
	position: absolute;
	top: 10px;
	right: 40px;
}

#ja-topnav ul {
	margin: 0;
	padding: 2px 0;
}

#ja-topbar {
	background: url(../images/grad-3.gif) repeat-x top #2F2F2F;
	height: 25px;
	margin: 0 10px;
	position: relative;
}

/* MAIN NAVIGATION
--------------------------------------------------------- */
#ja-mainnav {
	height: 40px;
	position: absolute !important;
	bottom: 0px;
	left: 0;
	z-index: 999;
	width: 100%;
	background: url(../images/mainnav-bg.gif) repeat-x bottom;
}

#ja-mainnav a, #ja-subnav a {
	outline: none;
	line-height: normal;
}

#ja-subnav {
	clear: both;
	background: url(../images/subnav-bg.gif) repeat-x bottom #D58400;
	margin: 0 10px;
	padding: 0 10px;
	height: 30px;
}

#ja-subnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#ja-subnav li {
	background: none;
	margin: 0;
	padding: 0;
	display: inline;
}

#ja-subnav a {
	display: block;
	float: left;
	outline: none;
	padding: 0 15px;
	line-height: 30px;
	text-decoration: none;
	color: #FFFFFF;
}

#ja-subnav a:hover,
#ja-subnav a:active,
#ja-subnav a:focus {
	color: #FFFFFF;
	background: url(../images/subnav-hover.gif) no-repeat center bottom;
	text-decoration: none;
}

#ja-subnav li.active a {
	color: #FFFFFF !important;
	font-weight: bold;
	background: url(../images/subnav-hover.gif) no-repeat center bottom;
	text-decoration: none;
}

/* breadcrumbs */
#ja-pathway {
	padding-top: 3px;
	color: #999999;
	text-indent: 15px;
}

#ja-pathway strong {
	margin-right: 5px;
}

#ja-pathway img {
	margin: 1px 5px;
}

/* Default Joomla! Menu */
ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

ul.menu li {
	display: block;
	background: url(../images/sep.gif) repeat-x bottom;
	margin: 0;
	padding: 0 0 2px;
	line-height: normal;
}

ul.menu li a {
	display: block;
	outline: none;
	padding: 8px 2px;
	margin: 0;
	text-decoration: none;
	color: #333333;
	font-weight: bold;
}

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
	color: #D58400;
	text-decoration: underline;
}

ul.menu li.active a {
	font-weight: bold;
}

ul.menu li ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.menu li li {
	border: none;
	background: none;
	padding: 0;
}

ul.menu li li a {
	border: none;
	padding: 2px 5px 8px 15px !important;
	text-transform: none;
	font-weight: normal !important;
	background: url(../images/arrow.png) no-repeat 8px 6px !important;
	color: #333333;
}

ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
	color: #D58400;
	text-decoration: underline;
}

ul.menu li li.active a {
	color: #D58400;
	font-weight: bold;
}

ul.menu li li li a {
	color: #333333 !important;
	font-weight: normal !important;
	padding-left: 25px !important;
	background: url(../images/arrow.png) no-repeat 18px 6px !important;
}

ul.menu li li li.active a {
	font-weight: bold !important;
}

/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
	float: left;
	overflow: hidden;
}

.ja-box-left div.module, .ja-box-center div.module {
}

/* Top spotlight */
#ja-topsl {
	clear: both;
	margin: 0 10px;
	padding: 0;
	height: 310px;
	background: url(../images/topsl-bg.gif) repeat-x bottom #1D1D1D;
	overflow: hidden;
}

#ja-topsl1 {
	float: left;
	width: 70%;
	overflow: hidden;
}

#ja-topsl1 div#ja-slideshowwrap {
	margin: 20px 10px;
}

#ja-topsl2 {
	float: right;
	width: 30%;
	overflow: hidden;
}

#ja-topsl2 div.moduletable h3, #ja-topsl2 div.moduletable h3 span {
	background-image: url(../images/h3-bg-d.gif);
}

#ja-topsl2 div.moduletable {
	margin: 20px 0 0;
}

/* Content spotlight */
#ja-contentsl1 {
	clear: both;
	width: 100%;
	padding: 0 0 5px;
}

#ja-contentsl2 {
	clear: both;
	margin: 0;
	padding: 5px 0;
}

#ja-contentsl1 div.module, #ja-contentsl2 div.module {
	margin: 0;
}

#ja-contentsl1 div.module h3, #ja-contentsl1 div.module h3 span,
#ja-contentsl2 div.module h3, #ja-contentsl2 div.module h3 span {
	background: none;
	color: #333333;
	height: auto;
	line-height: normal;
	padding-left: 4px;
}

#ja-contentsl1 ul.latestnews, #ja-contentsl1 ul.mostread {
	margin: 0;
}

#ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a {
	background: url(../images/icon-pages.gif) no-repeat left center;
	padding-left: 15px;
}

#ja-contentsl1 li.latestnews, #ja-contentsl1 li.mostread {
	background: url(../images/sep.gif) repeat-x bottom;
	padding: 4px 2px 6px;
}

#ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a {
	background: url(../images/icon-pages.gif) no-repeat left center;
	padding-left: 15px;
}

/* Bottom spotlight */
#ja-botsl {
	clear: both;
	margin: 0 10px;
	padding: 15px 5px;
	background: url(../images/grad-2.gif) repeat-x top #373737;
	border-top: 1px solid #1D1D1D;
	border-bottom: 1px solid #1D1D1D;
	color: #999999;
}

#ja-botsl div.moduletable h3, #ja-botsl div.moduletable h3 span {
	background: none;
	color: #FFFFFF;
	height: auto;
	line-height: normal;
	padding-left: 4px;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footer {
	clear: both;
	position: relative;
	padding: 8px 20px;
	margin: 0 10px;
	color: #666666;
	text-align: center;
	border-top: 1px solid #1D1D1D;
}

#ja-footer small {
	font-size: 100%;
}

#ja-botnav {
	background: #1D1D1D;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	clear: both;
	margin: 0 10px;
	padding: 5px 0;
	text-align: center;
}

#ja-botnav ul {
	margin: 0;
	padding: 0;
}

#ja-botnav li {
	margin: 0;
	padding: 0 10px;
	background: url(../images/vline.gif) no-repeat left center;
	display: inline;
}

#ja-botnav li a {
	color: #999999;
}

#ja-botnav li a:hover, #ja-botnav li a:active, #ja-botnav li a:focus {
	color: #FFFFFF;
}

/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
	position: absolute;
	top: -100%;
}

li.ja-firstitem {
	background: none !important;
}

.padding-none ul.film li {
	margin-left: 0;
}

#ja-tabs {
	margin: 0 0 10px 0;
	padding: 0;
}

#ja-tabs div {
	margin: 0;
	padding: 0;
}

#ja-tabs div.module {
	background: url(../images/box-br-w.gif) no-repeat bottom right #FFFFFF;
}

#ja-tabs div.module div {
	background: url(../images/box-bl-w.gif) no-repeat bottom left;
}

#ja-tabs div.module div div {
	padding: 0;
	background: url(../images/box-tr-w.gif) no-repeat top right;
}

#ja-tabs div.module div div div {
	background: url(../images/box-tl-w.gif) no-repeat top left;
}

#ja-tabs div.module div div div div {
	background: none;
}

/* Login */
#ja-login {
	position: absolute;
	right: 30px;
	top: 25px;
	color: #666666;
}

label.ja-login-user span,
label.ja-login-password span {
	display: block;
	width: 25px;
	height: 24px;
	float: left;
	text-indent: -5000px;
}

label.ja-login-user span {
	background: url(../images/icon-user.png) no-repeat;
}

label.ja-login-password span {
	background: url(../images/icon-key.png) no-repeat;
}

#ja-login label {
	float: left;
}

#ja-login form #mod_login_username,
#ja-login form #mod_login_password {
	width: 100px;
	margin: 2px 0 0 5px;
	font-size: 11px !important;
	border: 1px solid #CCCCCC;
}

#ja-login form #mod_login_password {
	margin-right: 5px;
}

#ja-login form .button {
	margin-top: 2px;
}

.ja-login-links {
	display: block;
	clear: both;
	padding: 6px 0 0;
	font-size: 92%;
}

.ja-login-links a {
	padding: 0 5px;
	color: #666666;
}

/*usertools*/
#ja-usertools {
	position: absolute;
	right: 10px;
	top: 8px;
}

#ja-usertools ul {
	margin: 0;
	padding: 0 10px 0 0;
	display: inline;
}

#ja-usertools ul li {
	margin: 0;
	padding: 0 2px;
	float: right;
	background: none;
}

/* Search */
#ja-search {
	background: url(../images/search-bg.gif) no-repeat left;
	position: absolute;
	right: 0;
	top: 0;
	height: 25px;
	padding-left: 35px;
	font-size: 11px;
}

#ja-search .inputbox {
	margin: 3px 3px 0 0;
	width: 150px;
	background: transparent;
	border: none;
	color: #999999;
}

#ja-search .button {
	font-size: 11px;
}

/*others*/
#ja-banner {
	padding: 5px 0 0;
	text-align: center;
	overflow: hidden;
	width: 100%;
	clear: both;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
	background: none!important;
	display: block;
	margin: 10px 0;
	text-decoration: none!important;
}

.clr {
	clear: both;
}

.hasTip img {
	border: none;
}

div.ja-innerdiv {
	padding: 8px 0 10px !important;
	background: url(../images/sep.gif) repeat-x bottom !important;
}

div.ja-innerdiv img.border {
	padding: 2px;
	border: 1px solid #CCCCCC;
	margin-right: 10px;
}

div.ja-innerdiv img {
	margin: 5px 0 0 5px;
}

div.module blockquote {
	margin: 0;
	padding: 0;
}

div.module span.title {
	font-weight: bold;
	display: block;
	margin: 5px 0;
}

/* Tooltips */
.tool-tip {
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	float: left;
	max-width: 200px;
	padding: 5px;
	z-index: 999;
	color: #333333;
}

.tool-title {
	background: url(../../system/images/selector-arrow.png) no-repeat;
	font-size: 100%;
	font-weight: bold;
	margin: 0;
	margin-top: -15px;
	padding: 0;
	padding-bottom: 5px;
	padding-top: 15px;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
	margin: 0 10px;
	padding: 0;
}

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
	background: none;
	color: #FFFFFF;
	margin: 0;
	padding: 5px;
}

/* System Standard Messages */
#system-message dd.message ul {
	background: #333333;
	border: none;
}

/* System Error Messages */
#system-message dd.error ul {
	background: #CC0000;
	border: none;
}

/* System Notice Messages */
#system-message dd.notice ul {
	background: #D58400;
	border: none;
}

/* Clearfix */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

* html > body .clearfix {
	display: block;
	width: 100%;
}

* html .clearfix {
	height: 1%;
}

I'd like to have a container, a row, really. And I'd like text aligned to the top of the div, and then some more text aligned to the bottom of the div, like this:

------------------------------------------
Top text



Bottom text
------------------------------------------

The thing is, I can't use tables, so if someone knows how to accomplish in a completely tableless way, I'd appreciate it!

I did try the following, but it didn't work:

Code:

.mainDiv{
	position: relative;
	float: left;
	width: 150px;
}

.mainDiv .upper {
	top: 0;
	position: absolute;
}

.mainDiv .lower {
	bottom: 0;
	position: absolute;
}

hey all,

here's my test page
http://www.pyesnflpool.com/

at the top...
Im trying to get the two links (Register & Recover Your Password) to be beside the arrows and Email Pye beside the mail image

it is running off two scripts, one for the links (snippetSideLine)and the other is holding together the header (elementTopPage)

As you can see on side-b I was making some effort to align them to the bottom with no success, my thoughts were to align to the bottom and than do a padding-bottom: 15px; or whatever, because I tried padding-top:120px to side-a which put the links in the right spot but left the rest of the page all over the place

any help is much appreciated, thanks


Code:

<!-- snippetSideLine -->
	
	<div>
	
	<?php
	
	if (isset ($this->User) && !empty ($this->User)) {
	
		if ($this->User->Type == 1) {
		
	?>
	<a href="../admin/index.php">Admin Panel</a>
	<?php
		
		}
		
	?>
	<a href="../members/myaccount.php">My Account</a>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="index.php?Logout">Logout</a>
	<?php
	
	}
	else {
	
	?>
	<a href="../members/register.php">Register</a>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="../members/forgotten.php">Recover Your Password</a>
	<?php
	
	}
	
	?>
	
	</div>
	
<!-- End: snippetSideLine -->

Code:

<!-- start: elementTopPage -->
<style type="text/css">
#wrapper {
	text-align: left;
	vertical-align: text-bottom;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 850px;
}


#side-a {
	float: left;
	width: 458px;
	height: 167px;
	background: url('../images/top_left.jpg') no-repeat;
}

#side-b {
	float: right;
	width: 168px;
	height: 167px;
	vertical-align: text-bottom;
	vertical-align: baseline;
	background: url('../images/top_right.jpg') no-repeat;
}

#content { 
	float: left;
	width: 224px;
	height: 167px;
	background: url("../images/top_bg.jpg") repeat;
}


</style>


<!-- elementTopPage -->
</head>

<body>


 
 <div id="wrapper">

	<div id="container">
		<div id="side-a">
			<?php
   	
				$this->Snippet ('SideLine');	
			?>
		</div>
		
		<div id="content">
			
		</div>

		
		<div id="side-b">
			email pye
		</div>
	</div>
</div>

<!-- End: elementTopPage -->