DIV Positioning & Absolute/Relative

we need all your code, or a link

All right. CSS:

* { padding: 0; margin: 0; }

#logo {
width: 150;
background: #000099;
color: #fff;
background-image: "images/globe-small.png";
}

#flash_ad {
position:relative;
background: #fffccc;
top: 149px;
}

#topmenu {
position: absolute; /* needs to be absolute for the z-index to work & the margin-positioning to work! */
z-index: 300;
color: #ffffff;
margin-top: 40px;
background: #0000cc;
padding: 10px;
/* width: 140px; */
top: 150px;
float: left;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#faux {
background: #fff;
margin-bottom: 5px;
overflow: hidden; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%

}
#header {
color: #333;
width: 902px;
padding: 10px;
height: 120px;
margin: 10px 0px 5px 0px;
background: #D1DBDB;
z-index: 100;
}
#navigation {
height: 60px;
z-index: 100;
color: #fff;
padding: 10px;
margin: 0px 0px 5px 0px;
background: #000099;

}
#leftcolumn {
z-index: 200;
background: #ABBEBE;
display: inline;
color: #333;
margin: 10px;
padding: 0px;
width: 195px;
float: left;

}
#content {
float: left;
color: #000;
margin: 10px 13px;
padding: 0px;
width: 460px;
display: inline;
position: relative;
}
#rightcolumn {
display: inline;
position: relative;
color: #333;
margin: 10px 10px 10px 0px;
padding: 0px;
width: 195px;
float: right;
}
#footer {
width: 902px;
clear: both;
color: #333;
background: #ABBEBE;
margin: 0px 0px 10px 0px;
padding: 10px;
}
.clear { clear: both; background: none; }

html,body{ /* lol? */
height: 100%;
margin: 0;
padding: 0;
}

Index: (Joomla)

<?php defined( '_VALID_MOS' ) OR DIE( 'Direct Access to this location is not allowed.' ); ?>

"
xml:lang="<?php ECHO _LANGUAGE; ?>">

" />
<?php
IF ($my->id) {
initEditor();
}
?>
<?php mosShowHead(); ?>

/css/template_css.css" rel="stylesheet"
type="text/css" media="screen" />
<?php IF ( mosCountModules( 'right' ) <= 0) { ?>
<?php } ?>

<?php //mosLoadModules('user9',-2);?>

<?php mosMainBody(); ?>




Hello!

It's not nice

Can you please parse the php first?

Ahm, sorry. Oh! It's relevant?

Welcome to the Frontpage

This is the Header

Flash Ad

Job Vacancy

Written by Administrator
  

Wednesday, 17 October 2007 13:11

27th September 2007 - Job vacancy at set big, book - Junior Developer

set are seeking to recruit a graduate software developer for a full-time position (37.5 hours per week) based at our Liverpool site.

Whilst industry experience would greatly benefit the candidate, set are also opening applications to fresh graduates who are eager to expand their skill set and wish to face diverse challenges on a daily basis.

The candidate will report to a senior developer and will be expected to assist with both long-running and short-term projects of dynamic problem specifications.

Both individual and team projects will be undertaken as part of the role, therefore the candidate should be articulate with good communication skills and be equally comfortable working alone and as part of a team.

For further information please download the person specification here.

Initial salary £15,000

Applications by CV & Covering letter, either via email to ' ); document.write( addy_text11725 ); document.write( '<\/a>' ); //-->\n ' ); //--> This e-mail address is being protected from spambots, you need JavaScript enabled to view it ' ); //--> or to the address listed on the contacts page marked for the attention of Jenny Eccleston.

Last Updated ( Wednesday, 24 October 2007 11:10 )

Hello!

Don't envy ;p
Thanks for reply ^.^

Okay, so now we have all your code, now you need to validate your code.

Vali...dat...e? :?

ok let me get back to you when accomplished ;]

http://validator.w3.org/

Without regard to your markup, float and position:absolute are mutually exclusive, with position trumping float. You can't use both on an element.

Here is a very generic example. Note that IE doesn't support the way I used the object element, so modify to your own needs to view in IE.

/**/

Sidebar

• link
  


• link
  


• link
  


• link
  

Flash object here

cheers,

gary

Thankyou!
Ok so after validation check, there are many errors. Although I think this is just how it is with Joomla. It mostly exists at the beginning and as a result of the doc type. After which there doesn't seem to be any invalid code.

Thanks Gary. Although I couldn't extract much from your code. I understand that they are exclusive now thanks, but the main problem of the 2nd div not sitting properly after the negative margins div is still my likkle conundrum.

Wrap the whole column in a div and put the neg margin on the wrapper. The purpose of the div element is to create a structural context that can be treated as a unit.

cheers,

gary

Ok thanks Gary.
I had a hunch, but tried it anyways. The module within the column does not float below the negative margins menu module. It lies hidden behind the (negative margins) module :/

The negative module is definetly contained within the container that holds the column.

Look again at my example. The column container, itself, is given the negative margin—not any of its contents.

gary

Oh sorry!
Please forgive?
Thanks again!

:scared:

Oh.. This is getting overwhelming ._o