Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using relative positioning and negative positions

    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:

    Code:
    #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:

    Code:
    <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 . . .
    Last edited by eskdale; 05-16-2007 at 05:59 PM. Reason: included something that I am not using

  • #2
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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"

  • #4
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •