tns2205 Posted May 24, 2006 Share Posted May 24, 2006 Hi there I am new to this forum and CSS. Could someone please help me. I want to create a containing Div that "floats" in the middle of the page and when you resize the size of you browser the container will reposition itself and keep its width.I basically want to create a Div tag instead of the 1 cell table with 800 width and the body has a center align. I have tried and tried, but can't seem to get it right.My second question is that now that I have created and positioned the center Div tag, now I want to place a picture or other div tag inside and place it on a specific location and has to move with the center Div.This would help me a lot I have contacted my trainer regarding this, but he says it can only be done with tables. Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 24, 2006 Share Posted May 24, 2006 That is not true, lol You can do it with divs too. See this: .body { text-align:center; vertical-align:middle; height:100%; }.centerdiv { text-align:left; vertical-align:top; width:800px; height:500px; }.childpic { position:relative; left:10px; top:10px; }.childdiv { position:relative; left:10px; top:200px; } <body><div class="centerdiv"><img class="childpic" src="image_link_here" width="" height="" alt="" /><div class="childdiv">something in here too</div></div></body>This should result in practically the thing you want... (I can't be sure, you should test it) Link to comment Share on other sites More sharing options...
Jonas Posted May 24, 2006 Share Posted May 24, 2006 http://www.cssplay.co.uk/ie/valign.htmlSomething like this?It only works in IE though... Link to comment Share on other sites More sharing options...
Kosher Kid Posted May 24, 2006 Share Posted May 24, 2006 dan...just for the fun of it, i tested your solution...didn't work in either ff or ie.jonas link was quite cool in ie....wonder if there's a way to do it in ie? Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 24, 2006 Share Posted May 24, 2006 What did it do then, when you tried my code? Link to comment Share on other sites More sharing options...
scott100 Posted May 25, 2006 Share Posted May 25, 2006 What did it do then, when you tried my code?<{POST_SNAPBACK}> Well nothing, it just sat there Did you even bother to test it before posting (I can't be sure, you should test it)I take it no thenMaybe only post code that works, otherwise your just wasting people's time. Link to comment Share on other sites More sharing options...
tns2205 Posted May 25, 2006 Author Share Posted May 25, 2006 Thank you very much for this it works perfectly.But one step further, say I am using my center div as the container and it is centered, but I want to use the child pic as the background and the childdiv as the body text, how would I position the text on top of the bg, we learnt about z-index, but as I understand it is going to override the container.Don't be nasty "If you just eat everything you get you might seem like a baby, but when you start experimenting you will find that the orange tastes much better without the skin"What I am trying to say is.Just remove the . in front of the body class or type<body class="body"> Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 25, 2006 Share Posted May 25, 2006 You could then just set the picture as the background image of the center div Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now