...

View Full Version : Using relative positioning and negative positions



eskdale
05-16-2007, 06:56 PM
Hi All,

While since I have been on here, meant to post the code to a site I was writing last time, but ain't got round to it yet.

I have an issue at the moment were I am aligning a div using relative positioning.

The problem I have is that I have a number of divs all contained within one central div. When I use the relative positioning it places the div to right of the last div in its natural order unless I use a negative top position figure to pull it up.

This looks fine, but it then creates a blank space below the last div equal to the negative figure.

The CSS that I am using is below:



#centre {
width: 750px;
height:auto;
margin: 0 auto 30px auto;
border: 1px ridge #333333;
background: #FFFFFF;
overflow: hidden;
}
#centre #banner {
margin: 10px;
width: 730px;
height: 120px;
}
#centre #banner a:link {
text-decoration: none;
border-style: none;
}
#centre #banner a:visited {
text-decoration: none;
border-style: none;
}
#centre #ad-bar {
position:relative;
top: -340px;
width: 150px;
right: 10px;
float: right;
}
#centre #ad-bar a:link {
text-decoration: none;
text-align:center;
border-style: none;
color: #FFFFFF;
}
#centre #ad-bar a:visited {
text-decoration: none;
border-style: none;
}
#centre #ad-bar table,tr,td {
padding: 0px;
margin: 0px;
border-width: 10px;
border-style: none;
}
#centre #content {
left: 10px;
top: 0px;
width: 400px;
float: left;
position: relative;
font-size: 85%;
padding: 10px 10px 20px;
font-family: Arial, Helvetica, sans-serif;
border-top: 1px solid #666666;
}
#centre #content h1 {
font: bolder 110% Arial, Helvetica, sans-serif;
text-align: center;
}
#centre #content h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0px;
padding: 0px;
}
#centre #content .pic {
float: left;
margin-right: 10px;
}
#centre #content .pic-right {
float: right;
margin-left: 10px;
}
#centre #content p {
font-size: 85%;
font-family: Arial, Helvetica, sans-serif;
}
#centre #bottom {
font-family: Arial, Helvetica, sans-serif;
width: 750px;
float: left;
padding: 0px;
height: auto;
}
#centre #bottom p {
font-size: 70%;
font-family: Arial, Helvetica, sans-serif;
width: 500px;
float: left;
padding-left: 10px;
padding-top: 5px;
}
#centre #bottom .img {
float: right;
margin-right: 10px;
padding-top: 15px;
padding-bottom: 10px;
}
#centre #guide {
position: relative;
padding-top: 10px;
border-top: 1px solid #666666;
float: left;
top: 0px;
height: 500px;
width: 150px;
padding-right: 0px;
left: 10px;
}
#centre #guide ul, li {
margin: 0;
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#centre #guide a:link {
text-decoration: none;
color: #FFFFFF;
border-style: none;
}
#centre #guide a:visited {
text-decoration: none;
color: #FFFFFF;
border-style: none;
}
#centre #content_no_adverts {
top: 0px;
width: 560px;
float: right;
position: relative;
font-size: 85%;
padding: 10px 10px 20px;
font-family: Arial, Helvetica, sans-serif;
border-top: 1px solid #666666;
right: 10px;
}
#centre #content_no_adverts .pic {
float: left;
margin-right: 10px;
}
#centre #content_no_adverts .pic-right {
float: right;
margin-left: 10px;
}
#centre #content_no_adverts p {
font-size: 85%;
padding-right: 10px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 0px;
}
#centre #content_no_adverts h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0px;
padding: 0px;
}
#centre #content_no_adverts h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 95%;
padding-left: 10px;
}
#centre #content_no_adverts h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
padding-left: 10px;
}
#centre #content_no_adverts h1 {
font: bold 110% Arial, Helvetica, sans-serif;
text-align: left;
padding-left: 10px;
}
#centre #content_no_adverts .safety {
display: inline;
padding-right: 40px;
padding-left: 40px;
float: left;
}
#centre #content_no_adverts table {
border: 1px solid #333333;
margin-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
#centre #content_no_adverts td, tr {
border: 1px solid #333333;
padding-left: 10px;
}
#centre #content_no_adverts #text {
font-size: 85%;
padding-right: 10px;
font-family: Arial, Helvetica, sans-serif;
}


The div that I am interested in is the "ad-bar"

the HTML is below:



<body>
<div id="centre">
<!--#include file="inc/banner.html" -->
<!--#include file="inc/index_nav.html" -->
<div id="content">
<img src="img/sail-front-page-01.jpg" alt="sailing" width="200" height="150" class="pic" />
<h2>Sail, Kayak and Powerboat.</h2>
<p>Learn to sail, kayak and powerboat in the heart of where ever. The weather is getting warmer and our course programme for 2007 will be starting soon after Easter.

We will be running blah blah blah.</p>
</div>
<div id="content">
<img src="img/high-ropes-01.jpg" alt="high ropes" width="170" height="128" class="pic-right" />
<h2>Activity Days Out</h2>
<p>blah blah blah</p>
</div>
<div id="content">
<img src="img/youth-club-01.jpg" alt="youth club" width="200" height="150" class="pic" />
<h2>Youth Club</h2>
<p>There will be activities for young people running during the blah blah blah. blah blah blah accredited awards &ndash; come down, join in, enjoy&hellip;</p>
</div>
<div id="ad-bar">
<table>
<tr>
<td background="img/ad1.gif" width="148" height="107">
<a href="#"></a> </td>
</tr>
<tr>
<td background="img/ad2.gif" width="148" height="107">
<a href="#"></a> </td>
</tr>
<tr>
<td background="img/ad3.gif" width="148" height="107">
<a href="#"></a> </td>
</tr>
<tr>
<td background="img/ad4.gif" width="148" height="107">
<a href="#"></a> </td>
</tr>
</table>
</div>
<!--#include file="inc/bottom.html" -->
</div>
</body>
</html>


Any help will surely be appreciated. I am sure it is to do with the negative number I have been forced to use in the ad-bar position. What I need to know is how to clear the white space this has created or another method of placing the ad-bar in the correct position.

I know I can't use other positioning syntax due to the sides of the main content having an auto width.

Cheers . . .

eskdale
05-16-2007, 08:42 PM
Does anyone need any more info for this one?

Looking at several 3 column suggestion pages, but haven't been able to apply to mine as of yet, I think I might over complicate my issues by having the content div repeating itself through the page.

koyama
05-16-2007, 09:08 PM
Without having a too good look at you code, I would say you need to do this:

Collect all the content divs to the left in one single div.
Float this new div to the left.
And float your ad-bar to the left too instead of to the right.
Drop the relative positioning for ad-bar together with the offsets that you currently have.

After doing this, you should arrive at a standard floated layout.

As a side issue, you shouldn't reuse id="content". What you need is class="content"

eskdale
05-17-2007, 12:21 PM
Cheers,

I had started thinking along those lines.

I just encapsulated the "content" div's inside a new "maintext" div. I could use a class for the content div, as you stated. Something I might implement at a later stage.

The encapsulation allowed the "ad-bar' div to knock up against the start of the last div.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum