HTML Forum

**Audioz** · 12-08-2004, 10:42 AM

Hello

Im having a little problem with CSS,to try and put a left and right box either side of a table,but having some trouble doing this,im also unsure of what type of positioning to choose,the top section I have positioned Absolute,but I don’t know if this is correct or ideal,what positioning type should I be using for each section of this?.
Theres an example of what im doing here,please ignore the color

, its just while I experiment to get things correct.Any help at all will be great.

http://ringtonesbase.com

Audioz

**Rincewind** · 12-08-2004, 02:22 PM

Try this code in your editor. It will explain the differance between absolute and relative positioning.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
div {
	height: 200px;
	width: 250px;
}
#cont1{
    border: 2px solid #FF0000;
    position:absolute;
	top:10px;
	left:10px
}
#cont2{
    border: 2px solid #FF0000;
    position:absolute;
	top:10px;
	left:320px
}
#cont3{
    border: 2px solid #FF0000;
    position:absolute;
	top:10px;
	left:620px}
.absol{
    border: 2px solid #0000FF;
    position:absolute;
	top:50px;
	left:50px
}
.rel{
    border: 2px solid #0000FF;
    position:relative;
	top:50px;
	left:50px
}
.normal{
    border: 2px solid #0000FF;
}
-->
</style>
</head>

<body>
<div id="cont1">
  <p>The absolutely positioned element (blue) takes it's location off of the parent element (red). It doesn't matter how much other stuff (e.g. text) precedes it. </p>
  <div class="absol">&nbsp;</div>
</div>
<div id="cont2">
  <p>The relatively positioned box is located based on the normal position of the element. Which in this case would be immediately below this text, but is now offset by 50px each way. </p>
  <div class="rel">&nbsp;</div>
</div>
<div id="cont3">
  <p>This example shows the rendering of the blue box without any css positioning. It should display directly bellow this text and entirely within the red border. </p>
  <div class="normal">&nbsp;</div>
</div>
</body>
</html>

**Audioz** · 12-08-2004, 03:04 PM

Hello Rincewind

Ive looked at that example that you provided and its starting to make some sense to me,of the 3 position types of normal,relative and absolute,would normal be the same as static? From what someone else was saying to me,i think absolute is maybe not an ideal choice,because of the differences in screen resolution to users,but im not totally understanding relative positioning.

Audioz

**Rincewind** · 12-08-2004, 04:49 PM

Yes, static is the same as no positioning. The element will be located in the normal flow of the document.

There is another setting position:fixed; But this doesn't work in IE. Would be nice if it did, but maybe some day. Anyway, here is the code above. This time modified to include fixed positioning. You'll have to test it in Firefox or Opera in order to see the effect.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
div {
	height: 200px;
	width: 250px;
}
#cont1{
    border: 2px solid #FF0000;
    position:absolute;
	top:10px;
	left:10px
}
#cont2{
    border: 2px solid #FF0000;
    position:fixed;
	top:10px;
	left:320px
}
#cont3{
    border: 2px solid #FF0000;
    position:absolute;
	top:10px;
	left:620px}
.absol{
    border: 2px solid #0000FF;
    position:absolute;
	top:50px;
	left:50px
}
.rel{
    border: 2px solid #0000FF;
    position:relative;
	top:50px;
	left:50px
}
.normal{
    border: 2px solid #0000FF;
}
#force-vert-scroll{
	position:absolute;
	width:250px;
	top:200%
	left:10px;
	top: 100%;
	left: 10px;
}
-->
</style>
</head>

<body>
<div id="cont1">
  <p>The absolutely positioned element (blue) takes it's location off of the parent element (red). It doesn't matter how much other stuff (e.g. text) precedes it. </p>
  <div class="absol">&nbsp;</div>
</div>
<div id="cont2">
  <p>The relatively positioned box is located based on the normal position of the element. Which in this case would be immediately below this text, but is now offset by 50px each way. </p>
  <div class="rel">&nbsp;</div>
</div>
<div id="cont3">
  <p>This example shows the rendering of the blue box without any css positioning. It should display directly bellow this text and entirely within the red border. </p>
  <div class="normal">&nbsp;</div>
</div>
<div id="force-vert-scroll">
<p>This is just here to force scrolling so that you can see the effect of the fixed positioning on the center box group. The center group will stay still while the other boxes scroll off the page.</p>
</div>
</body>
</html>

**Rincewind** · 05:01 PM

Quote:

From what someone else was saying to me,i think absolute is maybe not an ideal choice,because of the differences in screen resolution to users

I think here you are confusing absolute positioning with absolute dimentions.

The dimentions are the settings like width, height, top, left, font-size, indent, padding, margin and so on.

There are basically two forms of dimentions you can use in web design. Relative and absolute. Now they are the same words as used for position, but the mean different things here.

Absolute dimentions would be in units like px or pt. These are fixed. The element dimetioned in these units will be the same size on any screen and any curcumstance.

Relative dimentions are usings like % or ems. Using % sizes, the elements can change size depending on the parent elements size and/or the screen size.

In the code above, I use absolue px dimentions for almost all my units except for notable the #force-vert-scroll div. On this div I absolutly positioned it using relative units. By using top:100% I ensured that whatever size of screen you have, the page will be forced to scroll cause the div is set to start exactly one screen width down the page (thus is just off the page.)

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!