CSS Help

[Tep]

Alright this is driving me ing crazy!!!!

what im trying to do is have 3 divs inside a parent div

Code: Select all

-----------------------[Parent div]---------------------------------
|[left col] [                center col                ] [right col]|
--------------------------------------------------------------------

but once i start to edit the absolute position i get this

Code: Select all

-----------------------[Parent div]---
|[left col] [            center col            ]|[right col]
----------------------------------------------

in other words my right col is always outside of the parent div but i cant figure out why

ive tried moving my divs about but here is my code

Code: Select all

 #page{margin-top: 0px; margin-right: 100px; margin-left:100px; 5px; height: auto; position: relative;}

#about {position: absolute; top: 0px; left: 125px; width: 555px; height: auto; text-align: center;}

#link {position: absolute; top: 0px; right: 0px; width: 125px; height: auto;}

and my html

Code: Select all

<div id="page">
        <div id="nav"><ul> {list here}</ul></div>
        <div id="about"> text text text text text</div>
        <div id="link"><ul>{list}</ul></div>
</div>

mind you this isnt copy and pasted as i deleted the code to start a-new

but i've re-typed this so many times with the same result that i've remembered the code i left out borders and bg colors cause im a bit lazy right now to go into detail

or if it seems like i've gotten every thing into one div the bg color on #page doesn't take

and upon applying a border on the parent div i find that nothing is contained within it

[pseudo_opcode]

i can easily tell you the code for that but i am not going to do that
why do you want to use absolute positioning in two ids, and relative in #page?

And when you position generally you need only two, usually top and left, or you should use bottom or right(rarely used),

Using all at the same time is really gonna mess things up especially for different resolutions.

Think why...its gonna make you a better at CSS

[pseudo_opcode]

arrg i hate it when that happens, you come back after a long time and try to be a smartass and just realize you reignited an old topic

[Gogeta70]

Lol, nice one pseudo. In case tep is still wondering, the answer is pretty simple. Instead of using absolute positioning, try using the float property.

http://w3schools.com/css/css_float.asp

[CommonStray]

Also, you may want to consider setting your parent div height to 100% while the inside divs are auto,

You can ultimately set the left and center and right divs to have the float:left; property or the left and center to use left and the right to use float:right;, and kill off the absolute setting, since absolute does not take into effect the attributes of its parent (meaning it will set them outside oand out of proportion), you can use inherit of relative for the positioning attribute if you want, but in this case you really would only need it if your looking to set a z-index property as used in dropdowns and lists.

Using float you also have to ensure you set the widths of the columns properly to fit within the parent div, or else you will have columns falling under each other, make sure you factor in any border sizes, margins, and padding of the columns as well.