Help needed with positioning :/

[Huscy]

OK, am i right in thinking position: absolute; will position an object relative to its parent object?

The reason I ask is that i am re-designing my website, here it is so far: http://www.infinite-fire.net/v3/index.php -- as you can see im having some issues, especially in IE - could someone explain how 1) to make the <div> for the middle of the header centered, and the right and left /// images just fit around it?
Also 2) make the right and left columns 130px wide, and the middle expand to 90% of the remainder (regardless of resolution).

Thanks, i could really use help here :s

[Shyflower]

OK, am i right in thinking position: absolute; will position an object relative to its parent object?

The reason I ask is that i am re-designing my website, here it is so far: http://www.infinite-fire.net/v3/index.php -- as you can see im having some issues, especially in IE - could someone explain how 1) to make the <div> for the middle of the header centered, and the right and left /// images just fit around it?
Also 2) make the right and left columns 130px wide, and the middle expand to 90% of the remainder (regardless of resolution).

Thanks, i could really use help here :s

Position absolute positions the elements relative to the upper left corner of the page body.

Position relative will position an object relative to its parent object.

If I am understanding correctly, you want your content to occupy 90% of the entire page body. To do this, simple use

body{margin: x 5%}

With x being the distance you want between the top of the page and the beginning of your content (or in this case, your first division)

Then with declaring the width of left and right columns, the center should expand to fill the remainder.

[Paul O'B]

Position absolute positions the elements relative to the upper left corner of the page body.

Position relative will position an object relative to its parent object.

If I might jump in here

Position absolute positions an element in relation to its parents top left co-ordinates. It's parent is defined as the nearest ancestor that has a value set for the property position other than static (the default). If there is no ancestor then the parent is the root element which is effectively the html element( which is the body outside of all margins).

What this means is that to place an object absolutely in relation to its parent the parent needs to be position:relative (or position:absolute) (In the case of position:fixed the containing block is the viewport.)

Ther usual way to position in respect to a parent container is to give the parent container a position:relative but not to supply any co-ordinates. In this way the parent stays in the flow and the child positioned absolutely positioned within it and will move with its parent if required.

Position relative is only relative to itself. The element is moved in respect of the position it already occupies and then placed according to the co-ordinates given.

Basically position:relative;left:10px;top:10px will move an element 10px from the left and 10px from the top of where it would have been had it not been positioned .

Also the space that the element previously occupied is preserved. What that means is that everything else on the page will think that the element has not been moved at all. If you move an element a great distance with position:relative you will leave a whole that the element previously occupied. The element will be removed from the flow but the space it occupied will not.

Hope that clears it up a bit

Paul

[Huscy]

THANK YOU for clearing that up, if you look now - http://www.infinite-fire.net/v3/index.php - you can see that I have fixed most of the problems, but cant seem to figure out how to get the middle column to be 90% of the leftover space ...

[eskuel]

THANK YOU for clearing that up, if you look now - http://www.infinite-fire.net/v3/index.php - you can see that I have fixed most of the problems, but cant seem to figure out how to get the middle column to be 90% of the leftover space ...

Try...
height: auto;

Thats if you meant you wanted it to be 90% vertical.

[Shyflower]

If I might jump in here

Position absolute positions an element in relation to its parents top left co-ordinates. It's parent is defined as the nearest ancestor that has a value set for the property position other than static (the default). If there is no ancestor then the parent is the root element which is effectively the html element( which is the body outside of all margins).

What this means is that to place an object absolutely in relation to its parent the parent needs to be position:relative (or position:absolute) (In the case of position:fixed the containing block is the viewport.)

Ther usual way to position in respect to a parent container is to give the parent container a position:relative but not to supply any co-ordinates. In this way the parent stays in the flow and the child positioned absolutely positioned within it and will move with its parent if required.

Position relative is only relative to itself. The element is moved in respect of the position it already occupies and then placed according to the co-ordinates given.

Basically position:relative;left:10px;top:10px will move an element 10px from the left and 10px from the top of where it would have been had it not been positioned .

Also the space that the element previously occupied is preserved. What that means is that everything else on the page will think that the element has not been moved at all. If you move an element a great distance with position:relative you will leave a whole that the element previously occupied. The element will be removed from the flow but the space it occupied will not.

Hope that clears it up a bit

Paul

Hello Paul. I have just finished an article on absolute positioning that does agree with your point of view. However, I got my response from this one:
http://www.wdvl.com/Authoring/DHTML/...ndy_chart.html

It would appear that along with many other things html and css, there are different schools of thought on positioning.

[Huscy]

HHHMmmm ive got it working in firebird, but IE is making the central column far too wide, http://www.infinite-fire.net/v3/index.php - heres my code:

#midcol {
min-width: 450px;
/*margin-left: 130px;
margin-right: 130px;*/
background-color: #E1DACA;
border: 2px solid #444;
padding-top: 2px;
padding-bottom: 5px;
position: absolute;
top: 80px;
right: 150px;
left: 130px;
}


can anybody help me (please!!) .

[BenANFA]

However, I got my response from this one:
http://www.wdvl.com/Authoring/DHTML/...ndy_chart.html

It would appear that along with many other things html and css, there are different schools of thought on positioning.

If you look you will find that that article appears to be from a site last updated in August 1998 so is quite likely to be out of date.

Additionally if you care to experiment you will find Paul is correct.

The may be "there are different schools of thought" on how positioning should work but there is only one way that it is specified and most of the common browsers do a reasonable job of achieving it.

[Paul O'B]

The may be "there are different schools of thought" on how positioning should work but there is only one way that it is specified and most of the common browsers do a reasonable job of achieving it.

Thanks for backing me up

[Huscy]

can anyone help me ?

[Paul O'B]

Hi,

I think the best you can do for ie without changing the whole design is to give IE a width. Ie doesn't like its width defined by margins only.

So you could add this which only IE will get.

* html #midcol {width:65%;}

This makes it look similar to the firebird design, however it's not perfect.

To achieve your layout would need a complete redesign I think.

Paul

[Huscy]

Well how *could* i acheive my layout, the current code only took an hour or so to write, im not bothered if it needs re-coding

[DCS]

Huscy when I do a 3 column layout like you are doing here what I would do is keep your header <div> and your <div> called maincont. Inside maincont I would put 1 simple table with 1 row, 3 columns then set up classes to define the table cells, leftcol, midcol, rightcol then if you want the "content box" like you currently have create something like midcol_content so you end up with a <div> inside your middle column in the table.

Sure it's not a total tableless design but let's face facts CSS2 is not perfect and this is a nice workaround until CSS3 comes out and addresses the 3 column layout issue.

[Paul O'B]

Hi,

Well how *could* i acheive my layout, the current code only took an hour or so to write, im not if it needs re-coding

Well it all depends whether the image on the left hand side is to be the same size all the time or if you are happy to have a min height on your main container.

It also depends on what else you are going to do on the page afterwards and which column you are going to change. Unlike tables CSS needs to be more specific and there isn't one layout to catch all possibilities (unfortunately ).

Just to copy your layout in a different way can be achieved as follows but as mentioned above maybe entirely unsuitable.

anyway here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Design Centre - Infinite-Fire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Type CSS rules here and they will be applied
to pages from 'editcss'
immediately as long as you keep this window open. */
/**** LINK-tag style sheet styles.css ****/
/* Infinite-Fire.net CSS source */
body {
background-color: #444;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
padding: 5px;
}
pre {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin-bottom: 2px;
margin-top: 0px;
}
p {
margin-left: 15px;
margin-right: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
a:link {
border: 2px solid #DFD9C9;
color: #444;
font-weight: bold;
text-decoration: none;
z-index: 4;
}
a:visited {
border: 2px solid #DFD9C9;
color: #444;
font-weight: bold;
text-decoration: none;
margin: 5px;
z-index: 4;
}
a:hover {
border-right: 2px solid #DFD9C9;
border-left: 2px solid #DFD9C9;
border-bottom: 2px solid #444;
border-top: 2px solid #444;
color: #8A5507;
font-weight: bold;
text-decoration: none;
z-index: 4; 
}
 
#maincont {
background-color: #C5C0B6;
border: 2px solid #FFF;
padding: 3px;
position: relative;
min-height:700px;/*min-height for mozilla */
min-width:700px;/*min-width for mozilla */
}
* html #maincont {height:700px}/*min height for ie6 */
#lefthead {
background-image: url(images/header_leftbg.gif);
width: 40%;
height: 62px;
}
#righthead {
background-image: url(images/header_rightbg.gif);
width: 40%;
height: 62px;
position: absolute;
right: 5px;
margin-top: -62px;
}
#midhead {
background-image: url(images/header_centre.gif);
background-repeat: none;
width: 189px;
height: 62px;
margin-left: auto;
margin-right: auto;
margin-top: -62px;
}
.dashed_hr {
background-image: url(images/dashed_hr.gif);
background-repeat: repeat-x;
width: 100%;
height: 1px;
margin-top: 5px;
margin-bottom: 5px;
}
#leftcol {
position:absolute;
left:0;
}
#midcol {
margin-left: 130px;
margin-right:145px;
background-color: #E1DACA;
border: 2px solid #444;
padding-top: 2px;
padding-bottom: 5px;
}
#rightcol {
position: absolute;
right: 15px;
top: 80px;
text-align: right;
}
#nav {
border-bottom: 2px solid #444;
text-align: center;
width: 100%;
padding: 0px;
}
#container {height:100%}
</style>
</head>
<body>
<div id="maincont"> 
<div id="lefthead"></div>
<div id="midhead"></div>
<div id="righthead"></div>
<div class="dashed_hr"></div>
<div id="leftcol"> <img src="images/googleaddemo.gif" alt="" /> 
</div>
<div id="midcol"> 
	<div id="nav"> 
	 <pre><a href="#">Home</a> - <a href="#">Forum</a> - <a href="#">Photoshop</a> - <a href="#">HTML</a> - <a href="#">CSS</a> - <a href="#">Webmaster</a></pre>
	</div>
	<p> Welcome To Infinite-Fire.net - Web Design Centre Welcome to infinite-fire.net 
	 V3, THE place for web designers, programmers from novice to expert.</p>
	<p>We offer a plethoria of free web site design and programming tutorials 
	 - from HTML to JavaScript to PHP and CSS, tips and tricks.</p>
	<p>If you're looking for HTML tutorials, PHP Scripts or simply a web design 
	 community, look no further - Infinite-Fire offers all this and more!</p>
</div>
<div id="rightcol"><img src="images/addemo.gif" alt="" /></div>
</div>
</body>
</html>

Hope that gives you some ideas anyway

Paul

[NigelD]

Many thanks Paul,

I had been having a 'mare with absolute positioning of a block inside another block. As you'd suspect, the inner blocks, with an absolute position, were anchoring relative to the top-left of the page, instead of the top-left of the container block I'd put them in. In the end I got the effect I was after by using negative margins. The disadvantage there was that it extended the height of the parent container by 50% with blank space - causing scrolling.

Adding position:relative to the parent block made it all work!

Many thanks again.

Nigel