calling all CSS experts.
i have a problem with <divs> and styles.
i am trying to use a background image placed in div with the id of "content" , im also trying to float 2 more divs "leftnav" + "boxout"
OVER THE TOP of the background image.

which ever combination of float and clear i use in my stylesheet for all 3 id`s i seem to end up with the BG image ok but the following 2 id`s are nested below the bg at the bottom of the page (but above the footer) . very confusing.
Ps the the "leftnav" and "boxout" are placed between the 2 "content" divs.
thanks in advance!

Have you positioned your divs on the page? e.g. position=absolute left=0 top=0 should stick it at trhe top left of your page (if I remember my CSS - and I may not!!!)

yes the divs are possitioned on the html page
so that they are enclosed into relevant areas of the style sheet
what i mean is
<div id="content">the other 2 divs are placed within this div with there correct front and back symbols</div>

as fas as i know they dont need that information on the actual HTML page, absolute ect ect. all the need is an id shown up in the style sheet as a #symbol, where they can then be edited.

Could you post ur css and the actaul html where u use it please, it be much more streight forward to see whats going on.

use the z-index property to arrange layer visibility.

if you are trying to float them over the top of a div tag with a background image set, then those div tags need to be nested inside the "content" where they will sit and then set to float left to follow the natural display order within the "content" div tags

If you want to place both leftnav and boxout over the top of the content div, then I would specify top and left properties for everything and use the z-index to make sure they are arranged in the right order.

of course this might not be what you are getting at. Try posting your css up here surround it with [code] Vbulletin tags and someone will hunt out a solution for you.

edit

Originally posted by evildrneil
Have you positioned your divs on the page? e.g. position=absolute left=0 top=0 should stick it at trhe top left of your page (if I remember my CSS - and I may not!!!)

that depends on whether you want to anchor the container to the page or let it display in the run of the page (like html text) or if you want to float the container and its content so content flows around it...

Setting position:absolute pins the container to those values, leave out the position element (or set it to position:static IIRC) and it will appear in run of page, specify position:relative + values and it will appear in run of page, offset by your values. if you set any specific values and also set it to float:left - as far as I know, it will float left and ignore your positioning values.

as I understand it :)

Forget I said anything. :wink:

thanks for the help from everyone. found this interesting page
looks like the z-index is the problem. (thanks Phanerothyme)
http://www.blooberry.com/indexdot/css/properties/position/zindex.htm
sorry couldnt paste the page and code. its an unfinished project must be kept under wraps until the time comes!!
thanks again