relative positions

hello, I would like to include in my php page two div one at left and the other at right. And the things in both are in the same line, I get do it with one div relative and the other absolute, but I want both relatives, because if not, the zoom change the positions.

This is what I have (with zoom problems):

CSS:

#left{
	position: relative;	
	left:3%;
	top:3%; 	
}

#right{
	position: absolute;	
	left:50%;
	top:3%; 	
}

Code (markup):

PHP:

<div id='left'>
           //php code
<div id='right'>
          //php code
</div>
</div> 

PHP:

How can I get both relatives?

Thanks!

 

Try this:

CSS:

#left{
   position: relative;
   float: left;
   left:3%;
   top:3%;
}

#right{
   position: relative;
   left:50%;
   top:3%;
}

Code (markup):

PHP:

<div id='left'>
    //php code
</div>
<div id='right'>
    //php code
</div>

Code (markup):

 

Hi! thank you for your help! it works but not exactly how I would like, I have a new problem now.

In the right place I have two differents div again, the one is at the bottom doesn't anwer to a "top" variables:

#right_top {

	position: relative;	
	left:8%;
	top:47%;
 	
}

#rigth_bottom {

	position: relative;	
	left:8%;
	top:80%; /* doesnt work*/
	font : 120% sans-serif;
	color: Red;
 	
}

Code (markup):

and:

<div id='left'>
    //php code
</div>
<div id='right_top'>
    //php code
</div>
<div id='right_bottom'>
    //php code
</div>

PHP:

Thanks!

 

Add in the css:

body{
height: 100%;
}

 

It doesnt do anything! any change!

Thank you anyway!

 

1) You seem to be using position:relative without understanding what it is or how it SHOULD be used. Remember, position:relative does not change the elements position in flow, ONLY where it renders. For what you are trying to do, it sounds like you should be using margin or normal positioning.

2) You seem to be using position:absolute on what appear to be content elements that are not a fixed size, inside containers that are not a fixed size.

3) Top should have ZERO effect if the parent element does not have an EXPLICIT (aka non %) height on it right up to BODY. That's probably what s_ruben was trying to trigger since % height on body is the exception to the rule... in standards compliant browsers (it's HTML on IE, so declare both)

In general, I'd have to see WHAT it is you are trying to accomplish, but I have the feeling you are throwing a whole slew of unnecessary positioning on elements instead of designing using flow. The incomplete font declarations and other apparent flubs in the code seem to bear that conclusion out as well... Percentage positioning is almost as big a /FAIL/ as percentage widths in most cases - which is why I wonder what the devil you have for content and layout that's making you throw all this positioning at it.

ESPECIALLY the relative positioning that seems to be doing the job of MARGIN.

 

Umm, I'm quite secure that relative positions is what I want.

I want the same relative position between the elements, and this positions doesn't change with zoom or different screen sizes.

The positions are in the file attached, in the yellow, green and red colours.

Thanks!

Regards

 

As I suspected, you are using positioning for what should be handled by flow... and are not setting heights on any of this stuff since what you are trying to do, even using absolute positioning, is not going to work unless you fix the HEIGHTS of your elements... though you could fake much of that appearance using faux-columns.

Are those two wider areas (green and yellow in your example) supposed to be equal height?" Are all those elements supposed to be fixed height?

In either case, it's a stellar example of "working from a goofy picture" instead of designing off content. If those are indeed supposed to all be dynamic, I really think you are trying to do something that is not a viable design style using HTML/CSS. You'd have more luck using a table, and even that won't pull it off if they are supposed to be dynamic height.

If dynamic heights ARE involved, it's time for faux columns and to suck it up and have the green area shrink to fit it's content and the red area grow to the same height as the sidebar.

Which would go something like this:

<div id="fauxcolumns">
	<div id="sideBar">
		SideBar content
	</div>
	<div id="firstContent">
		First Content
	</div>
	<div id="secondContent">
		Second Content
	</div>
</div>

Code (markup):

and this css:

#fauxColumns {
	overflow:hidden; /* wrap floats */
	width:100%; /* wrap floats in IE */
	background:#FF0 url(images/fauxColumn.png) 0 0 repeat-y;
}

#sideBar {
	float:left;
	width:200px;
	height:200px;
	background:#8F8;
}


#firstContent {
	margin-left:200px;
	background:#4C4;
}

#secondContent {
	margin-left:200px;
}

Code (markup):

The faux-column image being 200px wide in that same yellow color as the sidebar, so that if the two content areas are taller than the sidebar content, you get the color (or images) to stretch.

Absolute positioning content elements removing them from flow? /FAIL/ right out of the gate.

 

Thanks! it worked!!!!